/* ============================================================
   AI 产品运营管理后台 - 视觉样式
   ============================================================ */
:root {
    --bg: #f2f5fb;
    --surface: #ffffff;
    --border: #e6eaf2;
    --border-strong: #d5dbe7;
    --text: #101828;
    --text-muted: #667085;
    --text-soft: #94a3b8;
    --primary: #2f6bff;
    --primary-dark: #1d4ed8;
    --primary-soft: #eaf1ff;
    --success: #12805c;
    --success-soft: #e3f7ee;
    --warn: #b25e09;
    --warn-soft: #fdf1dc;
    --danger: #c8293a;
    --danger-soft: #fdecee;
    --sidebar-from: #101a30;
    --sidebar-to: #16233f;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

h1, h2, h3 { margin-top: 0; color: var(--text); letter-spacing: -.01em; }
h2 { font-size: 16px; margin-bottom: 14px; }
h3 { font-size: 14px; }
p { margin: 0 0 10px; }

/* ---------------------------------------------------------- 侧边栏 */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 248px;
    padding: 20px 14px 24px;
    background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
    color: #cbd5f5;
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f8bff, #2f6bff);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 6px 16px rgba(47, 107, 255, .35);
    flex: none;
}

.brand-sub { display: block; font-size: 11px; font-weight: 500; color: #7c8db5; letter-spacing: .3px; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.sidebar a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #b9c5e0;
    font-size: 13.5px;
    transition: background .16s ease, color .16s ease;
}

.sidebar a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.sidebar a span { flex: 1; }
.sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.active { background: rgba(47, 107, 255, .18); color: #fff; font-weight: 600; }
.sidebar a.active svg { opacity: 1; }
.sidebar a.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.nav-badge {
    font-style: normal;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    display: none;
    font-weight: 700;
}
.nav-badge.on { display: inline-block; }

/* ---------------------------------------------------------- 主区域 */
.main { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    height: 68px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.topbar-title { display: flex; align-items: baseline; gap: 10px; }
.topbar-title strong { font-size: 17px; }
.muted { color: var(--text-soft); font-size: 12.5px; }

.topbar form { display: flex; align-items: center; gap: 12px; }

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.user-chip .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d9bff, #2f6bff);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.user-chip .name { font-size: 13px; color: var(--text); }

.content { padding: 26px 28px 48px; flex: 1; }

/* ---------------------------------------------------------- 面板与卡片 */
.panel, .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.panel { padding: 20px 22px; margin-bottom: 20px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }

.panel h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.panel h2::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--primary);
    flex: none;
}

.panel-head h2 { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

.card.stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 0;
    transition: transform .16s ease, box-shadow .16s ease;
}

.card.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--tone, var(--primary));
    background: #eef3ff;
    background: color-mix(in srgb, var(--tone, var(--primary)) 12%, #fff);
}

.stat-icon svg { width: 20px; height: 20px; }

.stat-body { min-width: 0; }
.stat-body span { display: block; color: var(--text-muted); font-size: 12.5px; }
.stat-body strong { display: block; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }

/* ---------------------------------------------------------- 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 15px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: var(--text);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    white-space: nowrap;
}

.btn:hover { background: #f7f9fc; border-color: #c3ccdd; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn.primary {
    background: linear-gradient(180deg, #3d78ff, var(--primary));
    border-color: var(--primary-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(47, 107, 255, .28);
}
.btn.primary:hover { background: linear-gradient(180deg, #3470ff, var(--primary-dark)); }

.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn.ghost:hover { background: #f7f9fc; color: var(--text); }

.btn.danger { background: var(--danger-soft); border-color: #f6cdd3; color: var(--danger); }
.btn.danger:hover { background: #fbdde1; }

.btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn.full { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.actions form { display: inline-flex; }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #f8fafd;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.toolbar .spacer { flex: 1; }
.toolbar a.btn { border-radius: 999px; background: #fff; }
.toolbar a.btn.primary {
    background: linear-gradient(180deg, #3d78ff, var(--primary));
    border-color: var(--primary-dark);
    color: #fff;
}

/* ---------------------------------------------------------- 徽标 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2fa;
    color: #3c4b64;
    white-space: nowrap;
}

.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--danger-soft); color: var(--danger); }
.badge.muted { background: #f1f3f7; color: #6b7280; }

/* ---------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }

th, td { text-align: left; padding: 11px 12px; vertical-align: top; border-bottom: 1px solid var(--border); }

th {
    background: #f8fafd;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
    white-space: nowrap;
    border-top: 1px solid var(--border);
}

th:first-child, td:first-child { padding-left: 14px; }
th:last-child, td:last-child { padding-right: 14px; }

tbody tr { transition: background .14s ease; }
tbody tr:hover { background: #fafcff; }
tbody tr:last-child td { border-bottom: 0; }

/* 空状态行 */
tbody td[colspan] {
    text-align: center;
    color: var(--text-soft);
    padding: 32px 12px;
    background: #fcfdff;
}

table .btn.small { padding: 4px 10px; }

/* ---------------------------------------------------------- 表单 */
label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 500; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

/* 复选框 / 单选框：自绘外观，必须有可见的选中态 */
input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    flex: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: #fff center / 12px 12px no-repeat;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--primary); }

input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4 6.6 11.4 12.4 4.8'/%3E%3C/svg%3E");
}

input[type="radio"]:checked {
    background-color: #fff;
    border-color: var(--primary);
    border-width: 5px;
}

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .18);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667085'%3E%3Cpath d='M4.2 6.2 8 10l3.8-3.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
}

textarea { min-height: 90px; resize: vertical; line-height: 1.55; }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .14);
}

input::placeholder, textarea::placeholder { color: #a9b2c3; }
input[type="file"] { padding: 7px 10px; background: #f8fafd; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid > button { justify-self: start; }

.hint { color: var(--text-muted); font-size: 12.5px; margin: 8px 0 0; }
small { color: var(--text-muted); font-size: 12px; }

/* ---------------------------------------------------------- 权限勾选 */
.perm-group { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 12px; }
.perm-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.perm-group-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 8px; }
.perm-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 8px 16px; margin: 0 0 6px; }
.perm-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); cursor: pointer; }
.perm-grid label:hover { color: var(--primary-dark); }

/* ---------------------------------------------------------- 其他 */
.steps { margin: 0; padding-left: 20px; color: var(--text-muted); }
.steps li { margin: 7px 0; }

.text-preview {
    max-width: 420px;
    white-space: pre-wrap;
    color: var(--text-muted);
    font-size: 13px;
    background: #f8fafd;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.err-text { color: var(--danger); }

code {
    background: #f1f4fa;
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.secret-box {
    background: var(--success-soft);
    border: 1px solid #b7e4d0;
    color: var(--success);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    word-break: break-all;
    font-size: 13.5px;
}

.alert { background: var(--danger-soft); border: 1px solid #f6cdd3; color: var(--danger); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; }

/* ---------------------------------------------------------- 内容生成中心：AI 工作台 */
.content:has(.content-lab) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    background:
        linear-gradient(90deg, rgba(94, 234, 212, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(125, 211, 252, .07) 1px, transparent 1px),
        linear-gradient(135deg, #07111f 0%, #0d1b2d 44%, #102032 100%);
    background-size: 42px 42px, 42px 42px, auto;
}

.main:has(.content-lab) .topbar {
    color: #d8e6ff;
    background: rgba(5, 13, 27, .78);
    border-bottom-color: rgba(103, 232, 249, .14);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}

.main:has(.content-lab) .topbar-title strong,
.main:has(.content-lab) .user-chip .name { color: #f8fbff; }
.main:has(.content-lab) .user-chip {
    border-color: rgba(148, 163, 184, .2);
    background: rgba(15, 23, 42, .62);
}

.content-lab::before,
.content-lab::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.content-lab::before {
    inset: -30% -20%;
    background:
        radial-gradient(520px 180px at 10% 18%, rgba(34, 211, 238, .2), transparent 70%),
        radial-gradient(460px 220px at 82% 38%, rgba(59, 130, 246, .18), transparent 72%),
        radial-gradient(500px 180px at 46% 96%, rgba(20, 184, 166, .13), transparent 70%);
    filter: blur(14px);
    opacity: .75;
    animation: labGlowDrift 12s ease-in-out infinite alternate;
}

.content-lab::after {
    inset: 0;
    background: linear-gradient(112deg, transparent 0 38%, rgba(103, 232, 249, .08) 48%, transparent 58%);
    transform: translateX(-80%);
    animation: labLightSweep 9s ease-in-out infinite;
}

@keyframes labGlowDrift {
    0% { transform: translate3d(-2%, -1%, 0) scale(.98); opacity: .5; }
    100% { transform: translate3d(4%, 3%, 0) scale(1.06); opacity: .9; }
}

@keyframes labLightSweep {
    0%, 35% { transform: translateX(-80%); opacity: 0; }
    52% { opacity: .9; }
    72%, 100% { transform: translateX(80%); opacity: 0; }
}

.content-lab {
    position: relative;
    z-index: 50;
    min-height: calc(100vh - 68px);
    padding: 14px 18px 24px;
    color: #d8e6ff;
}

.content-lab .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #67e8f9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.content-lab .eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px rgba(103, 232, 249, .7);
}

.lab-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(14, 116, 144, .16)),
        rgba(15, 23, 42, .64);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .24), 0 0 34px rgba(34, 211, 238, .06);
    backdrop-filter: blur(18px);
}

.lab-hero h1 {
    margin: 4px 0 3px;
    color: #f8fbff;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: 0;
}

.lab-hero p {
    max-width: 620px;
    margin: 0;
    color: #9fb4d1;
    font-size: 12px;
}

.lab-create-btn {
    min-height: 38px;
    border-color: rgba(34, 211, 238, .62);
    background: linear-gradient(180deg, #22d3ee, #2563eb);
    box-shadow: 0 0 24px rgba(34, 211, 238, .22);
}

.lab-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.lab-metrics article,
.lab-stream,
.lab-result,
.lab-drawer {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    background: rgba(15, 23, 42, .66);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.lab-metrics article {
    padding: 9px 13px;
    overflow: hidden;
}

.lab-metrics span {
    display: block;
    color: #8aa3c5;
    font-size: 12px;
}

.lab-metrics strong {
    display: inline-block;
    margin: 2px 0 0 8px;
    color: #f8fbff;
    font-size: 20px;
    line-height: 1.1;
}

.lab-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
    gap: 10px;
    align-items: start;
    transition: grid-template-columns .26s ease;
}

.lab-shell.drawer-open {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 30%) minmax(300px, 360px);
}

.lab-stream,
.lab-result {
    min-height: 480px;
    padding: 14px;
}

.lab-result {
    position: sticky;
    top: 92px;
}

.lab-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.lab-section-head h2 {
    margin: 4px 0 0;
    color: #f8fbff;
    font-size: 16px;
    letter-spacing: 0;
}

.lab-count {
    color: #8aa3c5;
    font-size: 12px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 999px;
    padding: 4px 10px;
}

.job-list {
    display: grid;
    gap: 10px;
}

.job-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 8px;
    background: rgba(8, 13, 25, .55);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.job-card:hover,
.job-card.active {
    border-color: rgba(34, 211, 238, .46);
    background: rgba(15, 36, 58, .72);
}

.job-card:hover { transform: translateY(-1px); }

.job-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.job-title-row strong {
    color: #f8fbff;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.job-meta span {
    color: #9fb4d1;
    font-size: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 999px;
    padding: 2px 8px;
    background: rgba(15, 23, 42, .5);
}

.job-card p {
    margin: 0;
    color: #b8c7dc;
    font-size: 13px;
}

.job-actions {
    justify-content: flex-end;
    align-content: start;
    max-width: 220px;
}

.content-lab .btn.ghost {
    color: #bdd3ef;
    border-color: rgba(148, 163, 184, .28);
}

.content-lab .btn.ghost:hover {
    background: rgba(148, 163, 184, .12);
    color: #fff;
}

.content-lab .badge {
    background: rgba(148, 163, 184, .15);
    color: #cbd5e1;
}

.content-lab .badge.ok { background: rgba(16, 185, 129, .14); color: #5eead4; }
.content-lab .badge.warn { background: rgba(245, 158, 11, .14); color: #fbbf24; }
.content-lab .badge.err { background: rgba(248, 113, 113, .15); color: #fca5a5; }
.content-lab .badge.muted { background: rgba(148, 163, 184, .15); color: #cbd5e1; }

.result-profile {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 8px;
    background: rgba(8, 13, 25, .52);
    margin-bottom: 12px;
}

.result-node {
    width: 10px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, #22d3ee, #2563eb);
    box-shadow: 0 0 18px rgba(34, 211, 238, .38);
    flex: none;
}

.result-profile strong,
.result-profile span {
    display: block;
}

.result-profile strong {
    color: #f8fbff;
    line-height: 1.45;
}

.result-profile span {
    color: #8aa3c5;
    font-size: 12px;
    margin-top: 4px;
}

.result-copy {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0;
    padding: 14px;
    color: #cde0f7;
    background: rgba(4, 8, 18, .58);
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.7;
}

.result-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.lab-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, .24);
    border-radius: 8px;
    color: #9fb4d1;
    background: rgba(8, 13, 25, .35);
}

.lab-empty strong {
    color: #f8fbff;
    font-size: 15px;
}

.lab-empty span {
    display: block;
    margin-top: 6px;
    max-width: 320px;
    font-size: 13px;
}

.lab-empty.compact { min-height: 360px; }

.lab-drawer {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 4;
    width: min(360px, 100%);
    min-height: 480px;
    max-height: none;
    padding: 14px;
    overflow: auto;
    transform: translateX(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s;
}

.lab-shell.drawer-open .lab-drawer {
    position: relative;
    inset: auto;
    width: auto;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.drawer-head h2 {
    margin: 4px 0 0;
    color: #f8fbff;
    font-size: 18px;
}

.drawer-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 8px;
    background: rgba(15, 23, 42, .68);
    color: #d8e6ff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.drawer-close:hover {
    background: rgba(34, 211, 238, .12);
    color: #fff;
}

.drawer-form {
    display: grid;
    gap: 14px;
}

.drawer-form label {
    color: #cde0f7;
}

.drawer-form input:not([type="checkbox"]):not([type="radio"]),
.drawer-form textarea,
.drawer-form select {
    color: #f8fbff;
    border-color: rgba(148, 163, 184, .24);
    background-color: rgba(8, 13, 25, .72);
}

.drawer-form input:focus,
.drawer-form textarea:focus,
.drawer-form select:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
}

.drawer-form textarea {
    min-height: 128px;
}

.drawer-form .hint {
    color: #8aa3c5;
}

/* ---------------------------------------------------------- 登录页 */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(1000px 500px at 12% -10%, rgba(79, 139, 255, .35), transparent 60%),
        radial-gradient(900px 480px at 100% 100%, rgba(124, 92, 255, .32), transparent 60%),
        linear-gradient(160deg, #0d1526 0%, #16233f 55%, #101a30 100%);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 30px 28px;
    display: grid;
    gap: 14px;
    box-shadow: 0 24px 60px rgba(8, 15, 30, .35);
}

.login-card h1 { font-size: 21px; margin: 0; }
.login-card p { margin: 0 0 6px; color: var(--text-muted); font-size: 13px; }

.login-logo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #4f8bff, #2f6bff);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(47, 107, 255, .35);
    margin-bottom: 4px;
}

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 960px) {
    .sidebar {
        position: static;
        width: auto;
        flex-direction: column;
        padding: 16px;
    }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar a { padding: 8px 12px; }
    .sidebar a.active::before { display: none; }
    .main { margin-left: 0; }
    .topbar { height: auto; padding: 14px 18px; flex-wrap: wrap; }
    .content { padding: 18px; }
    .stats, .form-grid, .perm-grid { grid-template-columns: 1fr; }
    .content:has(.content-lab) { padding: 0; }
    .content-lab { min-height: auto; padding: 16px; }
    .lab-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
    .lab-hero h1 { font-size: 24px; }
    .lab-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-shell,
    .lab-shell.drawer-open { grid-template-columns: 1fr; }
    .lab-stream, .lab-result { min-height: auto; padding: 14px; }
    .lab-result { position: static; }
    .job-card { grid-template-columns: 1fr; }
    .job-actions { justify-content: flex-start; max-width: none; }
    .lab-drawer {
        position: fixed;
        top: 76px;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: calc(100vh - 92px);
        transform: translateY(24px);
    }
    .lab-shell.drawer-open .lab-drawer {
        position: fixed;
        inset: 76px 16px auto;
        width: auto;
        min-height: 0;
        transform: translateY(0);
    }
}

/* Content workspace fills the viewport; each pane owns its scroll. */
body:has(.content-lab) { overflow: hidden; background: #080c10; }
body:has(.content-lab) .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 208px;
    padding: 18px 12px;
    background: rgba(12, 17, 23, .94);
    border-right: 1px solid #263238;
}
body:has(.content-lab) .sidebar nav { flex-direction: column; flex-wrap: nowrap; }
body:has(.content-lab) .sidebar a { padding: 10px 12px; }
body:has(.content-lab) .sidebar a.active { background: #153332; color: #8cf4d8; }
body:has(.content-lab) .main {
    height: 100dvh;
    min-height: 0;
    min-width: 0;
    margin-left: 208px;
    background: #080c10;
}
.main:has(.content-lab) .topbar {
    position: relative;
    flex: 0 0 56px;
    height: 56px;
    padding: 0 20px;
    background: rgba(15, 22, 28, .96);
}
.main:has(.content-lab) .topbar-title strong { font-size: 13px; }
.main:has(.content-lab) .topbar-title .muted { display: none; }
.main:has(.content-lab) .topbar .btn { color: #b4c4ce; }
.content:has(.content-lab) {
    flex: 1;
    min-height: 0;
    background: #080e12;
}
.content-lab {
    height: 100%;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: linear-gradient(#6ce3cd06 1px, transparent 1px), linear-gradient(90deg, #6ce3cd06 1px, transparent 1px), url("/assets/content-lab-bg.svg");
    background-size: 48px 48px, 48px 48px, cover;
    background-position: center, center, center;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: scroll, scroll, fixed;
}
.content-lab::before {
    inset: -50%;
    background: linear-gradient(115deg, transparent 30%, #27d6b923 43%, #52dff51a 49%, transparent 60%);
    filter: blur(18px);
    animation: labRibbonFlow 7s ease-in-out infinite alternate;
}
.content-lab::after {
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, #81ffe40d 48%, transparent 62%);
    animation: labLightSweep 6s linear infinite;
}
@keyframes labRibbonFlow {
    from { transform: translate3d(-18%, -8%, 0) rotate(-8deg); }
    to { transform: translate3d(18%, 8%, 0) rotate(8deg); }
}
.lab-hero, .lab-metrics, .lab-shell { position: relative; z-index: 1; }
.lab-hero {
    flex: none;
    align-items: center;
    flex-direction: row;
    padding: 14px 20px 10px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
}
.lab-hero h1 { margin: 0; font-size: 20px; }
.lab-create-btn { min-height: 34px; background: #1d8277; border-color: #4cd9ba; box-shadow: 0 0 18px #43e1bb25; }
.lab-create-btn:hover { background: #269c8b; border-color: #96ffe0; }
.lab-metrics {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0 20px 12px;
}
.lab-metrics article { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.lab-metrics span { color: #8caaa9; font-size: 11px; }
.lab-metrics strong { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.lab-shell, .lab-shell.drawer-open {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(200px, .65fr) minmax(0, 1fr) minmax(0, 0fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border-top: 1px solid #75e1ce26;
    transition: grid-template-columns .36s cubic-bezier(.22, 1, .36, 1);
}
.lab-shell.drawer-open { grid-template-columns: minmax(200px, .65fr) minmax(0, 1fr) minmax(300px, .9fr); }
.lab-stream, .lab-result, .lab-drawer {
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    padding: 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(13, 22, 27, .67);
    backdrop-filter: blur(24px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #36574e transparent;
}
.lab-result { position: relative; top: auto; border-left: 1px solid #75e1ce26; display: flex; flex-direction: column; }
.lab-stream { background: rgba(9, 15, 21, .72); }
.lab-section-head { flex: none; margin-bottom: 18px; }
.content-lab .eyebrow { color: #60cdb5; font-size: 10px; letter-spacing: 0; }
.lab-section-head h2 { font-size: 15px; }
.lab-empty, .lab-empty.compact {
    flex: 1;
    min-height: 0;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
}
.lab-empty span { line-height: 1.8; color: #78928e; }
.lab-empty::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    color: #87ead4;
    font-size: 30px;
    font-weight: 200;
    border: 1px solid #6edec94d;
    border-radius: 8px;
    background: linear-gradient(120deg, #183c3780, #121d25aa);
    box-shadow: 0 0 30px #4ce5c71a;
    animation: labNodePulse 3s ease-in-out infinite alternate;
}
@keyframes labNodePulse { to { border-color: #8affdfb3; box-shadow: 0 0 36px #4ce5c736; } }
.job-list { display: flex; flex-direction: column; min-height: calc(100% - 68px); }
.job-list > .lab-empty { flex: 1; }
.job-card { grid-template-columns: 1fr; border-radius: 6px; }
.job-actions { justify-content: flex-start; }
.result-profile { flex: none; background: #101d22a6; border-radius: 6px; }
.result-copy { flex: 1; min-height: 80px; max-height: none; border-radius: 6px; background: #070d1299; }
.result-foot { flex: none; }
.lab-drawer, .lab-shell.drawer-open .lab-drawer {
    position: relative;
    inset: auto;
    width: auto;
    max-height: none;
    padding: 0;
    background: rgba(16, 30, 34, .96);
    border-left: 1px solid #76e5ce66;
    transform: translateX(100%);
    overflow: auto;
}
.lab-shell.drawer-open .lab-drawer { padding: 18px; transform: translateX(0); }
.lab-drawer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 160px;
    background: linear-gradient(transparent, #9bffe1, transparent);
    box-shadow: 0 0 16px #75ffdc;
    pointer-events: none;
    animation: labEdgeFlow 4s linear infinite;
}
@keyframes labEdgeFlow { from { transform: translateY(-160px); } to { transform: translateY(100vh); } }
.drawer-head { align-items: center; }
.drawer-form label { min-width: 0; }
.drawer-form select, .drawer-form textarea { width: 100%; min-width: 0; }
.drawer-form .primary { background: #1c8a77; border-color: #53d9b6; }
.drawer-hint-error,
.drawer-submit-error { display: block; margin-top: 6px; color: #ffb4bd; font-size: 12px; }
.drawer-submit-error { margin: 0 0 2px; padding: 9px 11px; border: 1px solid rgba(255, 135, 150, .38); border-radius: 6px; background: rgba(157, 35, 58, .18); }
.content-lab :focus-visible { outline: 2px solid #7fe9d1; outline-offset: 3px; }
@media (max-width: 1100px) {
    body:has(.content-lab) .sidebar { width: 64px; padding: 14px 8px; }
    body:has(.content-lab) .brand { padding: 0; justify-content: center; margin-bottom: 22px; }
    body:has(.content-lab) .brand > span:last-child,
    body:has(.content-lab) .sidebar a > span,
    body:has(.content-lab) .nav-badge { display: none; }
    body:has(.content-lab) .sidebar a { justify-content: center; padding: 12px; }
    body:has(.content-lab) .sidebar a svg { width: 20px; height: 20px; }
    body:has(.content-lab) .main { margin-left: 64px; }
    .lab-shell { grid-template-columns: minmax(160px, .6fr) minmax(220px, .8fr) minmax(0, 0fr); }
    .lab-shell.drawer-open { grid-template-columns: minmax(140px, .6fr) minmax(180px, .8fr) minmax(260px, .8fr); }
    .lab-stream, .lab-result, .lab-shell.drawer-open .lab-drawer { padding: 14px; }
}

/* 普通功能页与内容中心一致：先通栏，再进入左右工作区。 */
body:has(.workspace-header) .content {
    padding: 0;
    min-height: calc(100vh - 68px);
}
.workspace-header {
    position: relative;
    z-index: 2;
    min-height: 96px;
    padding: 14px 28px 12px;
    border-bottom: 1px solid rgba(103, 173, 255, .22);
    background: linear-gradient(115deg, rgba(14, 34, 63, .92), rgba(20, 53, 91, .74));
    backdrop-filter: blur(20px);
}
.workspace-header .lab-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
}
.workspace-header .lab-hero h1 {
    margin: 0;
    color: #f1f7ff;
    font-size: 20px;
}
.workspace-header .lab-create-btn { min-height: 34px; }
.workspace-header .lab-metrics {
    gap: 18px;
    margin-top: 10px;
    padding: 0;
}
.workspace-header .lab-metrics article { background: transparent; }
.workspace-header .lab-metrics span { color: #9ab8d8; }
.workspace-header .lab-metrics strong { color: #f1f7ff; }
.workspace-header + .management-workspace,
.workspace-header + .publish-workspace {
    min-height: calc(100vh - 164px);
}
.workspace-header + .management-workspace .management-list-panel,
.workspace-header + .publish-workspace .publish-list-panel,
.workspace-header + .management-workspace .management-side-panel,
.workspace-header + .publish-workspace .publish-side-panel {
    min-height: calc(100vh - 164px);
}
@media (max-width: 700px) {
    .workspace-header { padding: 14px 20px 12px; }
    .workspace-header .lab-hero h1 { font-size: 18px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .lab-shell.drawer-open { grid-template-columns: minmax(0, 0fr) minmax(0, 1fr) minmax(260px, 48%); }
    .lab-shell.drawer-open .lab-stream { visibility: hidden; padding: 0; }
}
@media (max-width: 600px) {
    .main:has(.content-lab) .topbar { padding: 0 12px; flex-wrap: nowrap; }
    .main:has(.content-lab) .user-chip .name { display: none; }
    .main:has(.content-lab) .user-chip { padding: 2px; }
    .main:has(.content-lab) .topbar form { gap: 6px; }
    .lab-hero { padding: 12px; gap: 8px; flex-wrap: wrap; }
    .lab-hero h1 { font-size: 17px; }
    .lab-create-btn { font-size: 12px; padding: 6px 10px; }
    .lab-metrics { padding: 0 12px 10px; gap: 12px; }
    .lab-shell, .lab-shell.drawer-open { grid-template-columns: minmax(0, 0fr) minmax(0, 1fr) minmax(0, 0fr); }
    .lab-shell .lab-stream { visibility: hidden; padding: 0; }
    .lab-shell.drawer-open { grid-template-columns: minmax(0, 0fr) minmax(0, 0fr) minmax(0, 1fr); }
    .lab-shell.drawer-open .lab-result { padding: 0; visibility: hidden; }
    .lab-shell.drawer-open .lab-drawer { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .content-lab::before, .content-lab::after, .lab-drawer::before, .lab-empty::before { animation: none; }
    .lab-shell, .lab-drawer { transition: none; }
}

/* ---------------------------------------------------------- 全局科技感工作台主题 */
body:not(:has(.content-lab)) {
    color: #d9e7e5;
    background-color: #070d12;
    background-image:
        linear-gradient(115deg, rgba(7, 15, 19, .97), rgba(9, 20, 24, .91)),
        url("/assets/content-lab-bg.svg");
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
}

body:not(:has(.content-lab))::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 28%, rgba(91, 232, 201, .06) 48%, transparent 67%);
    transform: translateX(-70%);
    animation: globalTechSweep 14s ease-in-out infinite;
}

@keyframes globalTechSweep {
    0%, 35% { transform: translateX(-70%); opacity: 0; }
    52% { opacity: 1; }
    72%, 100% { transform: translateX(70%); opacity: 0; }
}

body:not(:has(.content-lab)) .sidebar,
body:not(:has(.content-lab)) .main {
    position: relative;
    z-index: 1;
}

body:not(:has(.content-lab)) .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    background: rgba(10, 17, 23, .95);
    border-right: 1px solid rgba(103, 235, 207, .16);
    box-shadow: 12px 0 36px rgba(0, 0, 0, .2);
}

body:not(:has(.content-lab)) .brand-mark {
    background: linear-gradient(135deg, #3ecdb1, #157b78);
    box-shadow: 0 0 22px rgba(69, 229, 194, .28);
}

body:not(:has(.content-lab)) .sidebar a {
    color: #9db5b5;
}

body:not(:has(.content-lab)) .sidebar a:hover {
    color: #d8fff4;
    background: rgba(88, 224, 193, .08);
}

body:not(:has(.content-lab)) .sidebar a.active {
    color: #9dffe4;
    background: rgba(51, 157, 137, .2);
}

body:not(:has(.content-lab)) .sidebar a.active::before {
    background: #62e8c9;
    box-shadow: 0 0 12px rgba(98, 232, 201, .7);
}

body:not(:has(.content-lab)) .main {
    background: transparent;
}

body:not(:has(.content-lab)) .topbar {
    color: #d9e7e5;
    background: rgba(10, 18, 23, .82);
    border-bottom-color: rgba(103, 235, 207, .15);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

body:not(:has(.content-lab)) .topbar-title strong,
body:not(:has(.content-lab)) .user-chip .name,
body:not(:has(.content-lab)) h1,
body:not(:has(.content-lab)) h2,
body:not(:has(.content-lab)) h3 {
    color: #effffc;
}

body:not(:has(.content-lab)) .user-chip {
    color: #d9e7e5;
    border-color: rgba(120, 210, 191, .18);
    background: rgba(18, 34, 38, .72);
    box-shadow: 0 0 18px rgba(50, 203, 174, .06);
}

body:not(:has(.content-lab)) .user-chip .avatar {
    background: linear-gradient(135deg, #3ed4b2, #167b78);
}

body:not(:has(.content-lab)) .content {
    color: #d9e7e5;
    background: transparent;
}

body:not(:has(.content-lab)) .content > .stats {
    margin-bottom: 22px;
}

body:not(:has(.content-lab)) .panel,
body:not(:has(.content-lab)) .card {
    color: #d9e7e5;
    background: rgba(13, 26, 31, .78);
    border-color: rgba(111, 218, 194, .16);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(18px);
}

body:not(:has(.content-lab)) .panel-head {
    border-bottom: 1px solid rgba(111, 218, 194, .12);
    padding-bottom: 12px;
}

body:not(:has(.content-lab)) .panel-head h2 {
    margin-bottom: 0;
}

body:not(:has(.content-lab)) .stat {
    position: relative;
    overflow: hidden;
}

body:not(:has(.content-lab)) .stat::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -42px;
    width: 120px;
    height: 100px;
    border-radius: 50%;
    background: var(--tone, #3ecdb1);
    opacity: .08;
    filter: blur(18px);
}

body:not(:has(.content-lab)) .stat-icon {
    background: color-mix(in srgb, var(--tone, #3ecdb1) 18%, transparent);
    border-color: color-mix(in srgb, var(--tone, #3ecdb1) 30%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--tone, #3ecdb1) 18%, transparent);
}

body:not(:has(.content-lab)) .stat-body > span,
body:not(:has(.content-lab)) .hint,
body:not(:has(.content-lab)) small,
body:not(:has(.content-lab)) .muted {
    color: #87a5a3;
}

body:not(:has(.content-lab)) .stat-body strong {
    color: #effffc;
}

body:not(:has(.content-lab)) .btn {
    color: #d9e7e5;
    background: rgba(23, 42, 46, .8);
    border-color: rgba(123, 190, 179, .24);
}

body:not(:has(.content-lab)) .btn:hover {
    color: #f4fffc;
    background: rgba(38, 76, 76, .9);
    border-color: rgba(118, 238, 207, .58);
}

body:not(:has(.content-lab)) .btn.primary {
    color: #effffc;
    background: linear-gradient(180deg, #29a98d, #14716f);
    border-color: #49d4b2;
    box-shadow: 0 0 20px rgba(58, 218, 180, .18);
}

body:not(:has(.content-lab)) .btn.primary:hover {
    background: linear-gradient(180deg, #35c5a2, #198887);
}

body:not(:has(.content-lab)) .btn.ghost {
    color: #9db8b5;
    background: transparent;
    border-color: rgba(123, 190, 179, .24);
}

body:not(:has(.content-lab)) .btn.ghost:hover {
    color: #dffff6;
    background: rgba(76, 180, 157, .1);
}

body:not(:has(.content-lab)) .btn.danger {
    color: #ffaaa9;
    background: rgba(130, 42, 57, .22);
    border-color: rgba(240, 105, 119, .28);
}

body:not(:has(.content-lab)) .toolbar {
    background: rgba(10, 22, 27, .68);
    border-color: rgba(111, 218, 194, .12);
}

body:not(:has(.content-lab)) .toolbar a.btn {
    background: rgba(20, 38, 42, .84);
}

body:not(:has(.content-lab)) .toolbar a.btn.primary {
    background: linear-gradient(180deg, #29a98d, #14716f);
}

body:not(:has(.content-lab)) table {
    color: #d9e7e5;
}

body:not(:has(.content-lab)) th {
    color: #8db2ad;
    background: rgba(18, 43, 45, .58);
    border-color: rgba(111, 218, 194, .15);
}

body:not(:has(.content-lab)) td {
    border-color: rgba(111, 218, 194, .1);
}

body:not(:has(.content-lab)) tbody tr:hover {
    background: rgba(73, 201, 174, .08);
}

body:not(:has(.content-lab)) tbody td[colspan] {
    color: #76928f;
    background: rgba(7, 18, 22, .42);
}

body:not(:has(.content-lab)) label {
    color: #b8d0cc;
}

body:not(:has(.content-lab)) input:not([type="checkbox"]):not([type="radio"]),
body:not(:has(.content-lab)) textarea,
body:not(:has(.content-lab)) select {
    color: #e6f8f3;
    background-color: rgba(6, 17, 21, .82);
    border-color: rgba(123, 190, 179, .26);
}

body:not(:has(.content-lab)) input:focus,
body:not(:has(.content-lab)) textarea:focus,
body:not(:has(.content-lab)) select:focus {
    border-color: #57dcb9;
    box-shadow: 0 0 0 3px rgba(74, 220, 185, .14), 0 0 18px rgba(74, 220, 185, .08);
}

body:not(:has(.content-lab)) input::placeholder,
body:not(:has(.content-lab)) textarea::placeholder {
    color: #5f7977;
}

body:not(:has(.content-lab)) input[type="checkbox"],
body:not(:has(.content-lab)) input[type="radio"] {
    background-color: rgba(6, 17, 21, .9);
    border-color: rgba(123, 190, 179, .38);
}

body:not(:has(.content-lab)) input[type="checkbox"]:checked {
    background-color: #19967e;
    border-color: #51d9b5;
}

body:not(:has(.content-lab)) .badge {
    background: rgba(102, 168, 157, .15);
    color: #b8ded6;
}

body:not(:has(.content-lab)) .badge.ok { color: #76e6c5; background: rgba(38, 169, 134, .16); }
body:not(:has(.content-lab)) .badge.warn { color: #f6cf79; background: rgba(170, 119, 36, .17); }
body:not(:has(.content-lab)) .badge.err { color: #ffaaa9; background: rgba(174, 53, 69, .18); }
body:not(:has(.content-lab)) .badge.muted { color: #9badac; background: rgba(108, 133, 136, .16); }

body:not(:has(.content-lab)) .steps {
    color: #a4bfbb;
}

body:not(:has(.content-lab)) .text-preview,
body:not(:has(.content-lab)) code {
    color: #b9d8d2;
    background: rgba(7, 19, 23, .7);
    border-color: rgba(111, 218, 194, .15);
}

body:not(:has(.content-lab)) .secret-box {
    color: #8de9cb;
    background: rgba(26, 103, 83, .24);
    border-color: rgba(77, 211, 167, .3);
}

body:not(:has(.content-lab)) .alert {
    color: #ffb1ad;
    background: rgba(125, 36, 48, .25);
    border-color: rgba(240, 105, 119, .3);
}

body:not(:has(.content-lab)) .perm-group {
    border-color: rgba(111, 218, 194, .14);
}

@media (max-width: 960px) {
    body:not(:has(.content-lab)) .sidebar {
        position: static;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(103, 235, 207, .16);
    }
    body:not(:has(.content-lab)) .main { margin-left: 0; }
    body:not(:has(.content-lab)) .sidebar nav { flex-direction: row; flex-wrap: wrap; }
}

/* 内容生成中心使用与其他页面一致的侧栏尺寸；仅内容区保留工作台布局。 */
body:has(.content-lab) .sidebar {
    width: 248px;
    padding: 20px 14px 24px;
    background: rgba(10, 17, 23, .95);
}
body:has(.content-lab) .brand {
    padding: 0 8px;
    justify-content: flex-start;
    margin-bottom: 24px;
}
body:has(.content-lab) .brand > span:last-child,
body:has(.content-lab) .sidebar a > span { display: inline; }
body:has(.content-lab) .nav-badge { display: none; }
body:has(.content-lab) .nav-badge.on { display: inline-block; }
body:has(.content-lab) .sidebar a {
    justify-content: flex-start;
    padding: 10px 12px;
}
body:has(.content-lab) .sidebar a svg { width: 17px; height: 17px; }
body:has(.content-lab) .main { margin-left: 248px; }

@media (max-width: 960px) {
    body:has(.content-lab) .sidebar {
        position: static;
        width: auto;
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid rgba(103, 235, 207, .16);
    }
    body:has(.content-lab) .brand {
        padding: 0 8px;
        justify-content: flex-start;
        margin-bottom: 16px;
    }
    body:has(.content-lab) .sidebar nav { flex-direction: row; flex-wrap: wrap; }
    body:has(.content-lab) .sidebar a { justify-content: flex-start; padding: 8px 12px; }
    body:has(.content-lab) .sidebar a > span,
    body:has(.content-lab) .brand > span:last-child { display: inline; }
    body:has(.content-lab) .nav-badge { display: none; }
    body:has(.content-lab) .nav-badge.on { display: inline-block; }
    body:has(.content-lab) .main { margin-left: 0; height: auto; }
}

/* ---------------------------------------------------------- 公共蓝色科技主题 */
:root {
    --tech-blue: #72bcff;
    --tech-blue-bright: #4d9dff;
    --tech-blue-strong: #2e6dff;
    --tech-blue-pale: #c7e5ff;
    --tech-bg: #091426;
    --tech-panel: rgba(16, 35, 61, .84);
    --tech-line: rgba(103, 173, 255, .22);
}

body:not(:has(.content-lab)),
body:has(.content-lab) {
    color: #d9ebff;
    background-color: var(--tech-bg);
    background-image:
        linear-gradient(115deg, rgba(7, 18, 38, .94), rgba(13, 31, 56, .87)),
        url("/assets/content-lab-bg.svg");
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
}

body:not(:has(.content-lab)) .sidebar,
body:has(.content-lab) .sidebar {
    background: rgba(10, 23, 45, .96);
    border-right-color: rgba(103, 173, 255, .22);
    box-shadow: 12px 0 36px rgba(2, 11, 28, .3);
}

body:not(:has(.content-lab)) .brand-mark,
body:has(.content-lab) .brand-mark {
    background: linear-gradient(135deg, #73c4ff, #2e6dff);
    box-shadow: 0 0 24px rgba(68, 145, 255, .34);
}

body:not(:has(.content-lab)) .sidebar a,
body:has(.content-lab) .sidebar a {
    color: #a9c3df;
}

body:not(:has(.content-lab)) .sidebar a:hover,
body:has(.content-lab) .sidebar a:hover {
    color: #eef8ff;
    background: rgba(74, 145, 255, .12);
}

body:not(:has(.content-lab)) .sidebar a.active,
body:has(.content-lab) .sidebar a.active {
    color: #e5f4ff;
    background: rgba(55, 119, 255, .26);
}

body:not(:has(.content-lab)) .sidebar a.active::before,
body:has(.content-lab) .sidebar a.active::before {
    background: var(--tech-blue);
    box-shadow: 0 0 14px rgba(91, 176, 255, .88);
}

body:not(:has(.content-lab)) .topbar,
body:has(.content-lab) .topbar {
    color: #d9ebff;
    background: rgba(9, 20, 39, .86);
    border-bottom-color: rgba(103, 173, 255, .2);
    box-shadow: 0 8px 30px rgba(2, 11, 28, .25);
}

body:not(:has(.content-lab)) .topbar-title strong,
body:has(.content-lab) .topbar-title strong,
body:not(:has(.content-lab)) .user-chip .name,
body:has(.content-lab) .user-chip .name,
body:not(:has(.content-lab)) h1,
body:not(:has(.content-lab)) h2,
body:not(:has(.content-lab)) h3,
body:has(.content-lab) h1,
body:has(.content-lab) h2,
body:has(.content-lab) h3 {
    color: #ecf7ff;
}

body:not(:has(.content-lab)) .user-chip,
body:has(.content-lab) .user-chip {
    color: #d9ebff;
    border-color: rgba(120, 190, 255, .24);
    background: rgba(20, 42, 74, .76);
    box-shadow: 0 0 20px rgba(65, 142, 255, .1);
}

body:not(:has(.content-lab)) .user-chip .avatar,
body:has(.content-lab) .user-chip .avatar {
    background: linear-gradient(135deg, #78c8ff, #326df7);
}

body:not(:has(.content-lab)) .panel,
body:not(:has(.content-lab)) .card {
    color: #d9ebff;
    background: var(--tech-panel);
    border-color: var(--tech-line);
    box-shadow: 0 18px 50px rgba(2, 11, 28, .3), inset 0 1px rgba(220, 242, 255, .035);
}

body:not(:has(.content-lab)) .panel-head,
body:not(:has(.content-lab)) .perm-group {
    border-color: rgba(103, 173, 255, .18);
}

body:not(:has(.content-lab)) .btn,
body:has(.content-lab) .btn {
    color: #d9ebff;
    background: rgba(20, 45, 80, .84);
    border-color: rgba(120, 190, 255, .3);
}

body:not(:has(.content-lab)) .btn:hover,
body:has(.content-lab) .btn:hover {
    color: #f3faff;
    background: rgba(43, 86, 143, .92);
    border-color: rgba(130, 209, 255, .72);
}

body:not(:has(.content-lab)) .btn.primary,
body:has(.content-lab) .btn.primary,
body:has(.content-lab) .lab-create-btn {
    color: #f4fbff;
    background: linear-gradient(180deg, #5bb7ff, #2f6dff);
    border-color: #75c7ff;
    box-shadow: 0 0 24px rgba(50, 132, 255, .28);
}

body:not(:has(.content-lab)) .btn.primary:hover,
body:has(.content-lab) .btn.primary:hover,
body:has(.content-lab) .lab-create-btn:hover {
    background: linear-gradient(180deg, #78c7ff, #3f7cff);
}

body:not(:has(.content-lab)) .btn.ghost,
body:has(.content-lab) .btn.ghost {
    color: #a9c8e7;
    background: transparent;
    border-color: rgba(120, 190, 255, .3);
}

body:not(:has(.content-lab)) .toolbar {
    background: rgba(12, 28, 51, .74);
    border-color: rgba(103, 173, 255, .18);
}

body:not(:has(.content-lab)) .toolbar a.btn,
body:has(.content-lab) .job-meta span,
body:has(.content-lab) .lab-count {
    background: rgba(19, 43, 77, .78);
    border-color: rgba(103, 173, 255, .22);
}

body:not(:has(.content-lab)) .toolbar a.btn.primary {
    background: linear-gradient(180deg, #5bb7ff, #2f6dff);
}

body:not(:has(.content-lab)) th {
    color: #9dc6ed;
    background: rgba(22, 52, 86, .68);
    border-color: rgba(103, 173, 255, .2);
}

body:not(:has(.content-lab)) td { border-color: rgba(103, 173, 255, .14); }
body:not(:has(.content-lab)) tbody tr:hover { background: rgba(66, 137, 235, .1); }
body:not(:has(.content-lab)) tbody td[colspan] { color: #7896b8; background: rgba(7, 18, 36, .5); }

body:not(:has(.content-lab)) label { color: #b9d3ed; }
body:not(:has(.content-lab)) input:not([type="checkbox"]):not([type="radio"]),
body:not(:has(.content-lab)) textarea,
body:not(:has(.content-lab)) select,
body:has(.content-lab) .drawer-form input:not([type="checkbox"]):not([type="radio"]),
body:has(.content-lab) .drawer-form textarea,
body:has(.content-lab) .drawer-form select {
    color: #e6f5ff;
    background-color: rgba(7, 20, 40, .88);
    border-color: rgba(120, 190, 255, .3);
}

body:not(:has(.content-lab)) input:focus,
body:not(:has(.content-lab)) textarea:focus,
body:not(:has(.content-lab)) select:focus,
body:has(.content-lab) .drawer-form input:focus,
body:has(.content-lab) .drawer-form textarea:focus,
body:has(.content-lab) .drawer-form select:focus {
    border-color: var(--tech-blue);
    box-shadow: 0 0 0 3px rgba(79, 157, 255, .18), 0 0 18px rgba(79, 157, 255, .1);
}

body:not(:has(.content-lab)) .badge.ok { color: #91caff; background: rgba(56, 127, 235, .2); }
body:not(:has(.content-lab)) .badge.warn { color: #ffd27e; background: rgba(170, 119, 36, .18); }
body:not(:has(.content-lab)) .badge.err { color: #ffabb5; background: rgba(174, 53, 69, .18); }
body:not(:has(.content-lab)) .badge.muted { color: #a7bdd8; background: rgba(87, 119, 157, .18); }

body:has(.content-lab) .content,
body:has(.content-lab) .content-lab { background-color: #0a172b; }
body:has(.content-lab) .content-lab {
    background-image: linear-gradient(rgba(109, 183, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 183, 255, .07) 1px, transparent 1px), url("/assets/content-lab-bg.svg");
}
body:has(.content-lab) .content-lab::before {
    background: linear-gradient(115deg, transparent 30%, rgba(60, 145, 255, .18) 43%, rgba(82, 190, 255, .12) 49%, transparent 60%);
}
body:has(.content-lab) .content-lab::after {
    background: linear-gradient(105deg, transparent 32%, rgba(102, 190, 255, .14) 48%, transparent 62%);
}
body:has(.content-lab) .content-lab .eyebrow { color: #78c7ff; }
body:has(.content-lab) .lab-shell { border-top-color: rgba(103, 173, 255, .28); }
body:has(.content-lab) .lab-result { border-left-color: rgba(103, 173, 255, .28); }
body:has(.content-lab) .lab-stream { background: rgba(8, 20, 39, .76); }
body:has(.content-lab) .lab-result { background: rgba(14, 31, 54, .7); }
body:has(.content-lab) .lab-drawer { background: rgba(16, 38, 67, .96); border-left-color: rgba(103, 173, 255, .62); }
body:has(.content-lab) .lab-drawer::before { background: linear-gradient(transparent, #83c9ff, transparent); box-shadow: 0 0 18px #62aaff; }
body:has(.content-lab) .lab-empty::before { color: #9bd5ff; border-color: rgba(113, 194, 255, .6); background: linear-gradient(120deg, rgba(30, 77, 130, .5), rgba(14, 34, 65, .72)); box-shadow: 0 0 34px rgba(56, 145, 255, .24); }
body:has(.content-lab) .job-card:hover,
body:has(.content-lab) .job-card.active { border-color: rgba(91, 177, 255, .62); background: rgba(19, 47, 84, .74); }

/* 内容中心抽屉与公共 page-drawer 对齐，覆盖全视口并压暗工作台。 */
body:has(.content-lab) .lab-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(2, 9, 22, .58);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .24s ease;
}
body:has(.content-lab) .lab-drawer-backdrop.open { opacity: 1; }
body:has(.content-lab) .lab-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 51;
    width: min(520px, calc(100vw - 28px));
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 24px;
    overflow: auto;
    background: linear-gradient(160deg, rgba(19, 48, 87, .98), rgba(8, 24, 48, .98));
    border-left: 1px solid rgba(116, 196, 255, .62);
    box-shadow: -24px 0 72px rgba(2, 12, 32, .42), inset 1px 0 rgba(216, 243, 255, .06);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
body:has(.content-lab) .lab-drawer.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
body:has(.content-lab) .lab-drawer .drawer-head {
}
body:has(.content-lab) .lab-shell.drawer-open .lab-drawer .drawer-head {
    margin-bottom: 24px;
}
body:has(.content-lab) .lab-drawer .drawer-head h2 {
    color: #eff9ff;
    font-size: 20px;
}
body:has(.content-lab) .lab-drawer .drawer-form {
    gap: 16px;
}
body:has(.content-lab) .lab-drawer .drawer-form label {
    color: #bdd8f2;
}
body:has(.content-lab) .lab-drawer .drawer-form input:not([type="checkbox"]):not([type="radio"]),
body:has(.content-lab) .lab-drawer .drawer-form textarea,
body:has(.content-lab) .lab-drawer .drawer-form select {
    color: #eaf6ff;
    background: rgba(5, 19, 42, .82);
    border-color: rgba(118, 194, 255, .34);
}
body:has(.content-lab) .lab-drawer .drawer-form .primary {
    color: #f4fbff;
    background: linear-gradient(180deg, #5bb7ff, #2f6dff);
    border-color: #75c7ff;
    box-shadow: 0 0 24px rgba(50, 132, 255, .28);
}
body:has(.content-lab) .lab-drawer::before {
    background: linear-gradient(transparent, #86d2ff, transparent);
    box-shadow: 0 0 20px #51aaff;
}
/* 公共右侧新增抽屉：普通列表页复用，内容中心保留工作台内嵌抽屉。 */
.page-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(2, 9, 22, .56);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .24s ease;
}
.page-drawer-backdrop.open { opacity: 1; }
.page-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 51;
    width: min(520px, calc(100vw - 28px));
    padding: 24px;
    overflow: auto;
    color: #d9ebff;
    background: linear-gradient(160deg, rgba(19, 48, 87, .98), rgba(8, 24, 48, .98));
    border-left: 1px solid rgba(116, 196, 255, .62);
    box-shadow: -24px 0 72px rgba(2, 12, 32, .48), inset 1px 0 rgba(216, 243, 255, .06);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.page-drawer.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.page-drawer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 170px;
    background: linear-gradient(transparent, #86d2ff, transparent);
    box-shadow: 0 0 20px #51aaff;
    animation: pageDrawerScan 4s linear infinite;
}
@keyframes pageDrawerScan { from { transform: translateY(-170px); } to { transform: translateY(100vh); } }
.page-drawer-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.page-drawer-head h2 { margin: 5px 0 0; color: #eff9ff; font-size: 20px; }
.page-drawer-content { position: relative; }
.page-drawer-content .panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.page-drawer-content .panel-head { display: none; }
.page-drawer-content .form-grid { grid-template-columns: 1fr; gap: 16px; }
.page-drawer-content .form-grid .wide { grid-column: auto; }
.page-drawer-content .form-grid > button { width: 100%; justify-self: stretch; }
.page-drawer-content label { color: #bdd8f2; }
.page-drawer-content input:not([type="checkbox"]):not([type="radio"]),
.page-drawer-content textarea,
.page-drawer-content select {
    color: #eaf6ff;
    background: rgba(5, 19, 42, .82);
    border-color: rgba(118, 194, 255, .34);
}
.page-drawer-content small,
.page-drawer-content .hint { color: #8eafd0; }
.page-drawer-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: #9fc7e7;
    border: 1px dashed rgba(118, 194, 255, .3);
    background: rgba(7, 21, 43, .42);
}
body:has(.content-lab) .lab-drawer {
    background: linear-gradient(160deg, rgba(19, 48, 87, .98), rgba(8, 24, 48, .98));
    box-shadow: -18px 0 56px rgba(2, 12, 32, .34), inset 1px 0 rgba(216, 243, 255, .06);
}
body:has(.content-lab) .lab-drawer .drawer-close,
.page-drawer .drawer-close {
    color: #dff3ff;
    background: rgba(18, 49, 87, .74);
    border-color: rgba(123, 201, 255, .38);
}
body:has(.content-lab) .lab-drawer .drawer-close:hover,
.page-drawer .drawer-close:hover {
    color: #fff;
    background: rgba(58, 124, 210, .52);
}
@media (max-width: 600px) {
    .page-drawer { width: calc(100vw - 12px); padding: 18px; }
}

/* 管理列表页统一复用内容中心右侧结果区。 */
.management-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
    align-items: stretch;
    gap: 0;
    min-height: 480px;
}
.management-list-panel { min-width: 0; margin-bottom: 0; border-radius: 8px 0 0 8px; }
.management-side-panel,
.publish-side-panel {
    min-width: 0;
    min-height: 480px;
    padding: 18px;
    color: #d9ebff;
    border: 0;
    border-left: 1px solid rgba(103, 173, 255, .28);
    border-radius: 0 8px 8px 0;
    background: rgba(14, 31, 54, .7);
    box-shadow: none;
    backdrop-filter: blur(24px);
}
.management-side-head,
.publish-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
.management-side-head h2,
.publish-side-head h2 { margin: 4px 0 0; color: #f8fbff; font-size: 16px; }
.management-eyebrow,
.publish-eyebrow { color: #78c7ff; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.management-count { color: #a8c6e4; font-size: 12px; }
.management-side-empty,
.publish-side-empty {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.management-mark,
.publish-empty-mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    color: #9bd5ff;
    font-size: 30px;
    font-weight: 300;
    border: 1px solid rgba(113, 194, 255, .6);
    border-radius: 8px;
    background: linear-gradient(120deg, rgba(30, 77, 130, .5), rgba(14, 34, 65, .72));
    box-shadow: 0 0 34px rgba(56, 145, 255, .16);
}
.management-side-empty strong,
.publish-side-empty strong { color: #f8fbff; font-size: 15px; }
.management-side-empty p,
.publish-side-empty p { max-width: 250px; margin: 0; color: #91a9c4; font-size: 13px; line-height: 1.8; }
.management-side-empty .btn { margin-top: 10px; }
.publish-side-panel { min-height: 480px; }
.publish-side-panel .publish-side-head { padding-bottom: 14px; border-bottom: 1px solid rgba(137, 170, 207, .18); }
.publish-side-panel .publish-side-summary { padding: 20px 0; }
.publish-side-panel .publish-side-meta { border-top-color: rgba(137, 170, 207, .14); }
@media (max-width: 1100px) {
    .management-workspace, .publish-workspace { grid-template-columns: 1fr; gap: 12px; }
    .management-list-panel, .publish-list-panel { border-radius: 8px; }
    .management-side-panel, .publish-side-panel { min-height: 280px; border: 1px solid rgba(103, 173, 255, .24); border-radius: 8px; }
    .management-side-empty, .publish-side-empty { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-drawer-backdrop, .page-drawer, .page-drawer::before,
    .lab-drawer-backdrop, .lab-drawer, .lab-drawer::before { transition: none; animation: none; }
}

/* 关闭全站块状背景流光，保留静态科技背景与玻璃层次。 */
.content-lab::before,
.content-lab::after,
body:not(:has(.content-lab))::before,
.lab-drawer::before,
.page-drawer::before {
    display: none;
    animation: none;
}
.lab-empty::before { animation: none; }

/* 发布任务中心复用内容中心右侧结果区的结构。 */
.publish-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
    align-items: start;
    gap: 12px;
}
.publish-list-panel { min-width: 0; margin-bottom: 0; }
.publish-side-panel {
    min-height: 420px;
    padding: 20px;
    color: #d9ebff;
    border: 1px solid rgba(103, 173, 255, .24);
    border-radius: 8px;
    background: rgba(14, 31, 54, .78);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
}
.publish-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(137, 170, 207, .18);
}
.publish-eyebrow { color: #78c7ff; font-size: 11px; font-weight: 700; }
.publish-side-head h2 { margin: 5px 0 0; color: #f1f7ff; font-size: 18px; }
.publish-side-summary { display: grid; gap: 6px; padding: 20px 0; }
.publish-side-summary strong { color: #eff7ff; font-size: 16px; line-height: 1.45; }
.publish-side-summary span,
.publish-side-note,
.publish-side-empty p { color: #91a9c4; font-size: 13px; line-height: 1.7; }
.publish-side-meta { display: grid; gap: 0; margin: 0; border-top: 1px solid rgba(137, 170, 207, .14); }
.publish-side-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(137, 170, 207, .14); }
.publish-side-meta dt { color: #8ea8c3; }
.publish-side-meta dd { margin: 0; color: #dcecff; text-align: right; }
.publish-side-note { margin: 18px 0 0; }
body .platform-selected { background: rgba(66, 137, 235, .12); }
body .platform-detail-link { color: #a3d3ff; text-decoration: underline; text-underline-offset: 4px; }
.platform-detail-meta dt { flex-shrink: 0; }
.platform-detail-meta dd { overflow-wrap: anywhere; }
.platform-detail-actions { margin-top: 22px; }
.workspace-header + .management-workspace.management-workspace-wide { grid-template-columns: minmax(0, 1fr); }
.publish-side-alert { margin-top: 18px; padding: 11px 12px; color: #ffbdc4; border: 1px solid rgba(255, 135, 150, .3); border-radius: 6px; background: rgba(157, 35, 58, .16); line-height: 1.6; }
.publish-side-links { display: grid; gap: 8px; margin-top: 18px; }
.publish-side-links a { color: #8bc9ff; }
.publish-side-empty { display: grid; justify-items: center; align-content: center; min-height: 330px; text-align: center; }
.publish-empty-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; color: #9bd5ff; font-size: 28px; border: 1px solid rgba(113, 194, 255, .52); border-radius: 8px; background: rgba(30, 77, 130, .32); }
.publish-side-empty strong { color: #eaf4ff; font-size: 15px; }
.publish-side-empty p { max-width: 240px; margin: 8px 0 0; }
@media (max-width: 1100px) { .publish-workspace { grid-template-columns: 1fr; } .publish-side-panel { min-height: 260px; } .publish-side-empty { min-height: 200px; } }

/* 内容中心工作台规范：管理页与发布页共用同一块状层级。 */
body:has(.management-workspace) .content,
body:has(.publish-workspace) .content {
    padding: 0;
    min-height: calc(100vh - 68px);
}

.management-workspace,
.publish-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 34%);
    min-height: calc(100vh - 68px);
    background: rgba(8, 20, 39, .52);
}

.management-list-panel,
.publish-list-panel {
    min-height: calc(100vh - 68px);
    padding: 24px 28px 36px;
    overflow: auto;
    border: 0;
    border-right: 1px solid rgba(103, 173, 255, .28);
    border-radius: 0;
    background: rgba(8, 20, 39, .76);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.management-list-panel .panel-head,
.publish-list-panel .panel-head {
    min-height: 42px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(103, 173, 255, .22);
}

.management-list-panel .panel-head h2,
.publish-list-panel .panel-head h2 {
    color: #f1f7ff;
    font-size: 18px;
}

.management-list-panel table,
.publish-list-panel table { min-width: 720px; }

.management-side-panel,
.publish-side-panel {
    min-height: calc(100vh - 68px);
    padding: 24px 22px;
    border: 0;
    border-radius: 0;
    background: rgba(14, 31, 54, .68);
    backdrop-filter: blur(24px);
}

.management-side-panel .management-side-head,
.publish-side-panel .publish-side-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(137, 170, 207, .18);
}

.management-summary {
    min-height: calc(100vh - 190px);
}

.management-summary::before { display: none !important; }

.management-summary .management-mark,
.publish-side-empty .publish-empty-mark {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(30, 77, 130, .32);
    box-shadow: 0 0 28px rgba(56, 145, 255, .12);
}

.management-summary .btn { margin-top: 10px; }

@media (max-width: 1100px) {
    body:has(.management-workspace) .content,
    body:has(.publish-workspace) .content { padding: 0; }
    .management-workspace,
    .publish-workspace { min-height: auto; }
    .management-list-panel,
    .publish-list-panel { min-height: 0; padding: 20px; border-right: 0; }
    .management-side-panel,
    .publish-side-panel { min-height: 300px; }
    .management-summary { min-height: 240px; }
}

body:has(.workspace-header) .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 20px;
    box-shadow: none;
}
body:has(.workspace-header) .topbar-title strong { font-size: 13px; }
body:has(.workspace-header) .topbar-title .muted { display: none; }
body:has(.workspace-header) .content { min-height: calc(100dvh - 56px); }
.workspace-header {
    padding: 14px 20px 12px;
    background-color: #0a172b;
    background-image: linear-gradient(rgba(103, 173, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 173, 255, .06) 1px, transparent 1px), url('/assets/content-lab-bg.svg');
    background-size: 48px 48px, 48px 48px, cover;
    background-position: center;
}
.workspace-header + :is(.management-workspace, .publish-workspace) {
    gap: 0;
    align-items: stretch;
    min-height: calc(100dvh - 152px);
}
body:has(.workspace-header) :is(.management-list-panel, .publish-list-panel) {
    min-height: 0;
    padding: 18px;
    background: rgba(8, 20, 39, .76);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.workspace-header + :is(.management-workspace, .publish-workspace) :is(.management-side-panel, .publish-side-panel) {
    min-height: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    border: 0;
    border-left: 1px solid rgba(103, 173, 255, .28);
    background: rgba(14, 31, 54, .7);
}
body:has(.workspace-header) :is(.management-list-panel, .publish-list-panel) .panel-head {
    min-height: 46px;
    margin-bottom: 18px;
    padding-bottom: 0;
    border: 0;
}
body:has(.workspace-header) .panel-head h2 { font-size: 15px; }
body:has(.workspace-header) .panel-head h2::before { display: none; }
.workspace-header + :is(.management-workspace, .publish-workspace) :is(.management-side-head, .publish-side-head) {
    min-height: 46px;
    margin-bottom: 18px;
    padding-bottom: 0;
    border: 0;
}
.workspace-header + :is(.management-workspace, .publish-workspace) h2 { font-size: 15px; }
body:has(.workspace-header) .management-summary,
body:has(.workspace-header) .publish-side-empty {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
body:has(.workspace-header) .management-summary .management-mark {
    display: grid;
    place-items: center;
    flex: none;
    margin: 0 0 16px;
    color: #9bd5ff;
    font-size: 28px;
}
@media (min-width: 1101px) {
    body:has(.workspace-header) { overflow: hidden; }
    body:has(.workspace-header) .main { height: 100dvh; min-height: 0; }
    body:has(.workspace-header) .topbar { flex: 0 0 56px; }
    body:has(.workspace-header) .content {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .workspace-header { flex: none; }
    .workspace-header + :is(.management-workspace, .publish-workspace) { flex: 1; min-height: 0; }
    body:has(.workspace-header) :is(.management-list-panel, .publish-list-panel, .management-side-panel, .publish-side-panel) { overflow: auto; }
}
@media (max-width: 1100px) {
    .workspace-header + :is(.management-workspace, .publish-workspace) { grid-template-columns: 1fr; min-height: 0; }
    .workspace-header + :is(.management-workspace, .publish-workspace) :is(.management-side-panel, .publish-side-panel) {
        min-height: 300px;
        border-left: 0;
        border-top: 1px solid rgba(103, 173, 255, .28);
    }
}