@import url('https://cdn.jsdelivr.net/npm/@fontsource/manrope@5.0.19/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/manrope@5.0.19/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/manrope@5.0.19/800.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.18/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@5.0.20/500.css');

/*
 * OVVO 后台主题 —— Ethereal Glass / 浅色克制版
 * 依据 design.md 与三套 DESIGN.md token：暖白画布 + 石墨黑结构 + 低调金点缀，
 * 玻璃质感仅用于侧栏/弹窗，避免大面积渐变与霓虹发光，追求“安静、高级、运营效率”。
 * 仅视觉层，不改任何字段、接口、逻辑、路由、权限与上传行为。
 */
:root {
    --ovvo-graphite: #161310;
    --ovvo-graphite-2: #231e18;
    --ovvo-graphite-3: #2c261d;
    --ovvo-ink: #1f1b15;
    --ovvo-ink-soft: #5c554a;
    --ovvo-slate: #8b8578;
    --ovvo-gold: #b0894f;
    --ovvo-gold-soft: #caa869;
    --ovvo-gold-strong: #96702f;
    --ovvo-amber: #d99a2b;
    --ovvo-blue: #5e72e4;
    --ovvo-red: #cc4b5c;
    --ovvo-green: #3f8f6b;
    --ovvo-canvas: #fbf8f2;
    --ovvo-canvas-2: #f4efe5;
    --ovvo-card: #ffffff;
    --ovvo-line: #ece5d8;
    --ovvo-line-2: #e0d7c6;
    --ovvo-line-strong: rgba(176, 137, 79, .38);
    --shadow-card: 0 4px 20px rgba(31, 27, 21, .05);
    --shadow-soft: 0 18px 44px -24px rgba(31, 27, 21, .3);
    --radius-card: 12px;
    --radius-input: 8px;
    --font-display: 'Manrope', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
}

/* ===== 全局画布与字体 ===== */
html,
body {
    background: var(--ovvo-canvas) !important;
}

body,
.content-wrapper,
.right-side,
body.inside-header,
body.inside-aside {
    background:
        radial-gradient(circle at 88% -4%, rgba(176, 137, 79, .05), transparent 34%),
        var(--ovvo-canvas) !important;
    color: var(--ovvo-ink) !important;
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-display);
}

.text-mono,
.ovvo-mono {
    font-family: var(--font-mono);
}

/* ===== 顶栏 ===== */
.main-header .logo {
    background: var(--ovvo-graphite) !important;
    border-right: 1px solid rgba(202, 168, 105, .18);
    color: var(--ovvo-gold-soft) !important;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
}

.main-header .logo .logo-lg {
    display: inline-block;
    line-height: 18px;
    padding-top: 8px;
    text-align: left;
}

.main-header .logo .logo-lg:after {
    color: var(--ovvo-slate);
    content: "ENERGY BACKEND";
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.4px;
    line-height: 14px;
}

.main-header .navbar {
    background: var(--ovvo-graphite) !important;
    border-bottom: 1px solid rgba(202, 168, 105, .12);
}

.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle {
    color: rgba(247, 242, 232, .8) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .nav > .open > a {
    background: rgba(202, 168, 105, .16) !important;
    color: #fff !important;
}

/* ===== 侧栏（石墨黑 + 金色选中）===== */
.main-sidebar,
.left-side {
    background: var(--ovvo-graphite) !important;
    border-right: 1px solid rgba(202, 168, 105, .1);
    box-shadow: 12px 0 40px -28px rgba(0, 0, 0, .6);
}

.sidebar {
    padding-bottom: 18px;
}

.user-panel {
    border-bottom: 1px solid rgba(202, 168, 105, .12);
    margin-bottom: 8px;
    padding: 14px 12px !important;
}

.user-panel > .image > img {
    border: 1px solid rgba(202, 168, 105, .3);
}

.user-panel > .info,
.user-panel > .info > a {
    color: rgba(247, 242, 232, .92) !important;
    font-weight: 600;
}

.user-panel > .info > a .fa {
    color: var(--ovvo-gold-soft);
}

.sidebar-form {
    border: 1px solid rgba(202, 168, 105, .16) !important;
    border-radius: var(--radius-input) !important;
    margin: 12px 12px 14px !important;
    overflow: hidden;
}

.sidebar-form input[type="text"],
.sidebar-form .btn {
    background: rgba(255, 255, 255, .06) !important;
    border: 0 !important;
    color: rgba(247, 242, 232, .78) !important;
}

.sidebar-form input[type="text"]::placeholder {
    color: rgba(247, 242, 232, .38);
}

.sidebar-menu > li.header {
    background: transparent !important;
    color: rgba(202, 168, 105, .6) !important;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sidebar-menu > li > a {
    border-left: 3px solid transparent !important;
    color: rgba(247, 242, 232, .72) !important;
    font-weight: 500;
    letter-spacing: .2px;
    padding: 12px 12px 12px 15px;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    color: rgba(202, 168, 105, .74);
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: rgba(202, 168, 105, .12) !important;
    border-left-color: var(--ovvo-gold) !important;
    color: #fdf6e6 !important;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li:hover > a > .fa {
    color: var(--ovvo-gold-soft);
}

.treeview-menu {
    background: rgba(0, 0, 0, .18) !important;
}

.treeview-menu > li > a {
    color: rgba(247, 242, 232, .56) !important;
}

.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
    color: var(--ovvo-gold-soft) !important;
}

/* ===== 面包屑 ===== */
#ribbon {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin: 14px 18px 0;
    min-height: 44px;
}

#ribbon .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 12px 16px;
}

#ribbon a,
#ribbon .breadcrumb > li,
#ribbon .breadcrumb > .active {
    color: var(--ovvo-ink-soft) !important;
    font-weight: 500;
}

.content {
    padding: 18px;
}

/* ===== 卡片 / 面板 ===== */
.panel.panel-default.panel-intro,
.panel.panel-default,
.box,
.nav-tabs-custom {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card);
    color: var(--ovvo-ink);
    overflow: hidden;
}

.panel-intro > .panel-heading,
.panel-default > .panel-heading,
.box-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ovvo-line) !important;
    color: var(--ovvo-ink) !important;
}

.panel-intro > .panel-heading .panel-lead,
.panel-intro > .panel-heading small {
    color: var(--ovvo-slate) !important;
}

.panel-body,
.box-body {
    background: transparent !important;
    color: var(--ovvo-ink);
}

.panel-intro .nav-tabs {
    border-bottom: 0;
}

.panel-intro .nav-tabs > li > a {
    background: var(--ovvo-canvas-2);
    border: 1px solid var(--ovvo-line);
    border-radius: 999px;
    color: var(--ovvo-ink-soft);
    font-weight: 600;
    margin-right: 8px;
    padding: 7px 16px;
}

.panel-intro .nav-tabs > li.active > a,
.panel-intro .nav-tabs > li.active > a:hover,
.panel-intro .nav-tabs > li.active > a:focus {
    background: var(--ovvo-graphite) !important;
    border-color: var(--ovvo-graphite) !important;
    color: var(--ovvo-gold-soft) !important;
}

/* ===== 工具条 ===== */
.toolbar,
.fixed-table-toolbar {
    background: var(--ovvo-canvas-2) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-input);
    margin-bottom: 14px;
    padding: 11px;
}

.toolbar:before,
.toolbar:after {
    display: none;
}

/* ===== 按钮 ===== */
.btn {
    border-radius: var(--radius-input);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .2px;
}

.btn-primary {
    background: var(--ovvo-graphite) !important;
    border: 1px solid var(--ovvo-graphite) !important;
    color: var(--ovvo-canvas) !important;
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ovvo-graphite-2) !important;
    border-color: var(--ovvo-gold) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--ovvo-gold) !important;
    border: 1px solid var(--ovvo-gold) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--ovvo-gold-strong) !important;
    border-color: var(--ovvo-gold-strong) !important;
    color: #fff !important;
}

.btn-info {
    background: var(--ovvo-blue) !important;
    border-color: var(--ovvo-blue) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--ovvo-red) !important;
    border-color: var(--ovvo-red) !important;
    color: #fff !important;
}

.btn-default,
.btn-warning {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line-2) !important;
    color: var(--ovvo-ink) !important;
}

.btn-default:hover,
.btn-warning:hover {
    border-color: var(--ovvo-gold) !important;
    color: var(--ovvo-gold-strong) !important;
}

/* ===== 表单控件 ===== */
.form-control,
.bootstrap-select .btn,
.selectpicker {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line-2) !important;
    border-radius: var(--radius-input) !important;
    box-shadow: none;
    color: var(--ovvo-ink) !important;
}

.form-control::placeholder {
    color: var(--ovvo-slate);
}

.form-control:focus {
    border-color: var(--ovvo-gold) !important;
    box-shadow: 0 0 0 3px rgba(176, 137, 79, .15) !important;
}

.input-group-addon {
    background: var(--ovvo-canvas-2) !important;
    border-color: var(--ovvo-line-2) !important;
    color: var(--ovvo-gold-strong) !important;
}

/* ===== 表格 ===== */
.bootstrap-table .fixed-table-container {
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-input);
    overflow: hidden;
}

.bootstrap-table .table,
.table {
    background: var(--ovvo-card) !important;
    color: var(--ovvo-ink) !important;
}

.table > thead > tr > th {
    background: var(--ovvo-canvas-2) !important;
    border-bottom: 1px solid var(--ovvo-line-2) !important;
    color: var(--ovvo-slate) !important;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    background: transparent !important;
    border-top: 1px solid var(--ovvo-line) !important;
    color: var(--ovvo-ink) !important;
    vertical-align: middle;
}

/* 订单号 / 金额 / 数字类使用等宽字体，提升“配方数据”质感 */
.table td .text-mono,
.table td .ovvo-mono,
.bootstrap-table td[data-field="id"],
.bootstrap-table td[data-field="order_no"],
.bootstrap-table td[data-field="amount"],
.bootstrap-table td[data-field="actual_amount"],
.bootstrap-table td[data-field="pay_amount"],
.bootstrap-table td[data-field="price"] {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(176, 137, 79, .07) !important;
}

/* ===== 状态胶囊（低饱和 tint + 语义色）===== */
.label,
.badge {
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .02em;
    padding: .38em .82em;
}

.label-success {
    background-color: rgba(63, 143, 107, .13) !important;
    border: 1px solid rgba(63, 143, 107, .3);
    color: #2f6f52 !important;
}

.label-warning {
    background-color: rgba(217, 154, 43, .15) !important;
    border: 1px solid rgba(217, 154, 43, .32);
    color: #9a6c14 !important;
}

.label-danger {
    background-color: rgba(204, 75, 92, .13) !important;
    border: 1px solid rgba(204, 75, 92, .3);
    color: #b03a4a !important;
}

.label-info,
.label-primary {
    background-color: rgba(94, 114, 228, .13) !important;
    border: 1px solid rgba(94, 114, 228, .3);
    color: #4657c0 !important;
}

.label-default {
    background-color: rgba(31, 27, 21, .08) !important;
    border: 1px solid rgba(31, 27, 21, .16);
    color: var(--ovvo-ink) !important;
}

/* ===== 弹窗 / 下拉：适度玻璃 ===== */
.layui-layer,
.dropdown-menu {
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft) !important;
}

.layui-layer-title {
    background: var(--ovvo-canvas-2) !important;
    border-bottom: 1px solid var(--ovvo-line) !important;
    color: var(--ovvo-ink) !important;
    font-family: var(--font-display);
    font-weight: 700;
}

.dropdown-menu > li > a {
    color: var(--ovvo-ink) !important;
}

.dropdown-menu > li > a:hover {
    background: rgba(176, 137, 79, .12) !important;
    color: var(--ovvo-gold-strong) !important;
}

/* ===== 页面 Hero（克制石墨黑）===== */
.ovvo-page-hero {
    align-items: center;
    background: linear-gradient(135deg, var(--ovvo-graphite), var(--ovvo-graphite-3) 70%);
    border: 1px solid rgba(202, 168, 105, .18);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    color: var(--ovvo-canvas);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 18px;
    overflow: hidden;
    padding: 22px 26px;
    position: relative;
}

.ovvo-page-hero:after {
    background: radial-gradient(circle at 84% 18%, rgba(217, 154, 43, .16), transparent 46%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.ovvo-page-hero > * {
    position: relative;
    z-index: 1;
}

.ovvo-page-kicker {
    color: var(--ovvo-gold-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .32em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ovvo-page-hero h3 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
}

.ovvo-page-hero p {
    color: rgba(247, 242, 232, .74);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    max-width: 720px;
}

.ovvo-page-chip {
    border: 1px solid var(--ovvo-line-strong);
    border-radius: 999px;
    color: var(--ovvo-gold-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    padding: 8px 16px;
    white-space: nowrap;
}

/* ===== 表单卡 ===== */
.ovvo-form-card {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin: 16px;
    overflow: hidden;
}

.ovvo-form-head {
    background: linear-gradient(135deg, var(--ovvo-graphite), var(--ovvo-graphite-3) 75%);
    border-bottom: 1px solid rgba(202, 168, 105, .18);
    color: var(--ovvo-canvas);
    padding: 20px 24px;
}

.ovvo-form-kicker {
    color: var(--ovvo-gold-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.ovvo-form-head h3 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 5px;
}

.ovvo-form-head p {
    color: rgba(247, 242, 232, .72);
    font-size: 12.5px;
    line-height: 1.65;
    margin: 0;
}

.ovvo-form-card > form,
form.ovvo-form-body {
    padding: 22px 24px 76px;
}

.ovvo-form-card .control-label,
.form-horizontal.ovvo-form-body .control-label {
    color: var(--ovvo-ink);
    font-size: 13px;
    font-weight: 500;
    padding-top: 8px;
}

.ovvo-form-card textarea.form-control,
.form-horizontal.ovvo-form-body textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.ovvo-form-card .radio label,
.form-horizontal.ovvo-form-body .radio label {
    background: var(--ovvo-canvas-2);
    border: 1px solid var(--ovvo-line-2);
    border-radius: 999px;
    color: var(--ovvo-ink);
    font-weight: 500;
    margin: 0 8px 8px 0;
    padding: 7px 14px 7px 30px;
}

.ovvo-form-card .radio input[type="radio"],
.form-horizontal.ovvo-form-body .radio input[type="radio"] {
    margin-left: -18px;
    margin-top: 2px;
}

.ovvo-form-card .input-group .btn,
.form-horizontal.ovvo-form-body .input-group .btn {
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

.ovvo-form-card .form-group.layer-footer,
form.ovvo-form-body .form-group.layer-footer {
    border-top: 1px solid var(--ovvo-line);
    margin-top: 14px;
    padding-top: 16px;
}

.ovvo-form-card .faupload-preview li,
.form-horizontal.ovvo-form-body .faupload-preview li {
    background: var(--ovvo-canvas-2);
    border: 1px solid var(--ovvo-line-2);
    border-radius: 10px;
    padding: 6px;
}

/* ===== 登录页 ===== */
.ovvo-login-hero {
    background: linear-gradient(135deg, var(--ovvo-graphite), var(--ovvo-graphite-3));
    color: var(--ovvo-canvas);
}

/* ===== 运营总览数据卡（含语义能量线）===== */
.ovvo-stat-card {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-left: 3px solid var(--ovvo-gold) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 18px 20px !important;
}

.ovvo-stat-card .num {
    color: var(--ovvo-ink);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ovvo-stat-card .label {
    color: var(--ovvo-slate);
    font-size: 13px;
    letter-spacing: .04em;
}

/* ===== 总览页（浅色克制，覆盖内联深色残留）===== */
.ovvo-dashboard {
    background:
        radial-gradient(circle at 88% -4%, rgba(176, 137, 79, .05), transparent 32%),
        var(--ovvo-canvas) !important;
    color: var(--ovvo-ink) !important;
}

.ovvo-dashboard .ovvo-hero {
    background: linear-gradient(135deg, var(--ovvo-graphite), var(--ovvo-graphite-3) 72%) !important;
    border: 1px solid rgba(202, 168, 105, .18) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft) !important;
}

.ovvo-dashboard .ovvo-hero:before {
    background: radial-gradient(circle, rgba(217, 154, 43, .22), transparent 64%) !important;
}

.ovvo-dashboard .ovvo-hero:after {
    background: linear-gradient(90deg, transparent, rgba(202, 168, 105, .45), transparent) !important;
}

.ovvo-dashboard .hero-meta {
    color: var(--ovvo-gold-soft) !important;
    font-family: var(--font-mono);
}

.ovvo-dashboard .ovvo-hero h3 {
    color: #fff !important;
    font-family: var(--font-display);
    font-size: 26px !important;
}

.ovvo-dashboard .ovvo-hero p {
    color: rgba(247, 242, 232, .72) !important;
    max-width: 860px;
}

.ovvo-dashboard .ovvo-hero-badge {
    border: 1px solid rgba(202, 168, 105, .28) !important;
    border-radius: var(--radius-input) !important;
    color: var(--ovvo-gold-soft) !important;
}

.ovvo-dashboard .kpi-card,
.ovvo-dashboard .section-card {
    background: var(--ovvo-card) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--ovvo-ink) !important;
}

.ovvo-dashboard .kpi-card {
    border-left: 3px solid var(--ovvo-gold) !important;
}

.ovvo-dashboard .kpi-card.warning {
    border-left-color: var(--ovvo-amber) !important;
}

.ovvo-dashboard .kpi-card.danger {
    border-left-color: var(--ovvo-red) !important;
}

.ovvo-dashboard .kpi-card:before {
    display: none !important;
}

.ovvo-dashboard .kpi-label,
.ovvo-dashboard .section-title small,
.ovvo-dashboard .kpi-sub {
    color: var(--ovvo-slate) !important;
}

.ovvo-dashboard .kpi-value,
.ovvo-dashboard .section-title h4 {
    color: var(--ovvo-ink) !important;
    font-family: var(--font-display);
}

.ovvo-dashboard .kpi-value {
    font-weight: 800;
    letter-spacing: -.02em;
}

.ovvo-dashboard .kpi-icon {
    background: var(--ovvo-graphite) !important;
    color: var(--ovvo-gold-soft) !important;
}

.ovvo-dashboard .section-title {
    border-color: var(--ovvo-line) !important;
}

.ovvo-dashboard .ovvo-chart-wrap {
    background: var(--ovvo-canvas) !important;
    border: 1px solid var(--ovvo-line) !important;
    border-radius: var(--radius-input) !important;
}

.ovvo-dashboard .todo-list li {
    border-bottom: 1px solid var(--ovvo-line) !important;
}

.ovvo-dashboard .todo-name {
    color: var(--ovvo-ink-soft) !important;
}

.ovvo-dashboard .todo-count {
    background: var(--ovvo-graphite) !important;
    color: var(--ovvo-canvas) !important;
    font-family: var(--font-mono);
}

.ovvo-dashboard .todo-count.gold {
    background: var(--ovvo-gold) !important;
    color: #fff !important;
}

.ovvo-dashboard .ovvo-table > thead > tr > th {
    background: var(--ovvo-canvas-2) !important;
    border-color: var(--ovvo-line-2) !important;
    color: var(--ovvo-slate) !important;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ovvo-dashboard .ovvo-table > tbody > tr > td {
    border-color: var(--ovvo-line) !important;
    color: var(--ovvo-ink) !important;
}

.ovvo-dashboard .ovvo-table td:nth-child(2),
.ovvo-dashboard .ovvo-table td:nth-last-child(2) {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.ovvo-dashboard .status-tag {
    font-family: var(--font-display);
    font-weight: 600;
}

.ovvo-dashboard .status-wait,
.ovvo-dashboard .status-ship {
    background: rgba(94, 114, 228, .12) !important;
    color: #4657c0 !important;
}

.ovvo-dashboard .status-finish {
    background: rgba(63, 143, 107, .13) !important;
    color: #2f6f52 !important;
}

.ovvo-dashboard .status-refund {
    background: rgba(204, 75, 92, .12) !important;
    color: #b03a4a !important;
}

.ovvo-dashboard .empty-row {
    color: var(--ovvo-slate) !important;
}

/* ===== 响应式 ===== */
@media (max-width: 767px) {
    .content {
        padding: 10px;
    }

    .ovvo-page-hero {
        align-items: flex-start;
        display: block;
        padding: 20px;
    }

    .ovvo-page-chip {
        display: inline-block;
        margin-top: 12px;
    }

    .toolbar .btn,
    .toolbar .btn-group {
        margin-bottom: 8px;
    }

    .ovvo-form-card {
        margin: 10px;
    }

    .ovvo-form-card > form,
    form.ovvo-form-body {
        padding: 16px 14px 80px;
    }

    .ovvo-form-card .control-label,
    .form-horizontal.ovvo-form-body .control-label {
        text-align: left;
    }
}

/* ===== 晶石素材库网格视图 ===== */
.btn-bead-view {
    float: right;
}

.bead-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    padding: 4px 2px 8px;
}

.bead-card {
    background: var(--ovvo-card);
    border: 1px solid var(--ovvo-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bead-card:hover {
    border-color: var(--ovvo-line-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.bead-thumb {
    background-color: var(--ovvo-canvas-2);
    background-position: center;
    background-size: cover;
    padding-top: 100%;
    position: relative;
}

.bead-flag {
    background: var(--ovvo-gold);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    left: 8px;
    padding: 3px 9px;
    position: absolute;
    top: 8px;
    z-index: 2;
}

.bead-hover {
    background: linear-gradient(180deg, transparent, rgba(22, 19, 16, .84));
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    padding: 14px;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .2s ease;
}

.bead-card:hover .bead-hover {
    opacity: 1;
}

.bead-hover-row {
    align-items: baseline;
    color: rgba(247, 242, 232, .82);
    display: flex;
    font-size: 12px;
    justify-content: space-between;
}

.bead-hover-row b {
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
}

.bead-hover .bead-edit {
    background: var(--ovvo-gold);
    border-radius: var(--radius-input);
    color: #fff !important;
    display: block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    padding: 7px 0;
    text-align: center;
    text-decoration: none;
}

.bead-hover .bead-edit:hover {
    background: var(--ovvo-gold-strong);
}

.bead-meta {
    padding: 12px 14px;
}

.bead-name {
    color: var(--ovvo-ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bead-cate {
    color: var(--ovvo-slate);
    font-size: 12px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bead-grid-empty {
    color: var(--ovvo-slate);
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
}