@import './opc-design-tokens.css';
@import './opc-mobile.css';
@import './opc-ai-native.css';

/* 视口高于内容时避免露出浏览器默认白底；主区块至少铺满一屏 */
html {
    background-color: #090909;
}
body#body {
    background-color: #090909;
}
section.middle_con.black-bg {
    min-height: 100vh;
    background-color: #090909;
}

/* ========== 玻璃拟态全局变量 ========== */
:root {
  --glass-blur: 14px;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-bg-active: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --glass-shadow-glow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 40px rgba(230, 185, 128, 0.06);
}

/* OPC 嵌入：顶栏改为 sticky，占位在文档流内，整页滚动时正文不会顶入栏下（含刷新恢复滚动位置） */
.head_nav.opc-embed-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    height: 62px;
    box-sizing: border-box;
    /* common.css 中 .nav_pc 为 inline-block，在非 OPC 页 body 非 flex 时顶栏会按内容收缩贴左；拉满整行后 .menu_nav 的 space-between 才与 opc.html 一致 */
    display: block;
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    /* 覆盖上方 .head_nav.opc-embed-nav { display:block }，避免与手机顶栏叠成双菜单 */
    .head_nav.nav_pc.opc-embed-nav {
        display: none !important;
    }

    .nav_mobile.opc-embed-nav-mobile {
        display: block !important;
        position: sticky;
        top: 0;
        left: auto;
        width: 100%;
        z-index: 25;
    }
}

/* 嵌入 OPC 页：纵向 flex，主区吃满剩余视口（顶栏已占位，不再用 padding 假避让 fixed） */
body#body:has(.opc-showcase-inner) {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body#body:has(.opc-showcase-inner) section.middle_con.black-bg {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* 与原先「一屏」观感一致：总高度仍为一屏，由 flex 分配而非 100vh+顶栏叠加 */
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
}

@media screen and (max-width: 768px) {
    body#body:has(.opc-showcase-inner) section.middle_con.black-bg {
        min-height: calc(100vh - 2.7rem);
        min-height: calc(100dvh - 2.7rem);
    }
}

/* 主内容宽度与顶栏 .menu_nav 一致：max-width 1720px + 左右 30px（common.css） */
/* SPA 挂载区：禁用 WOW 残留（若外层误加 wow 类会导致整块 opacity:0 不可见） */
.opc-showcase.wow,
.opc-showcase .wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

.opc-showcase {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 顶栏 sticky 占位后，仅保留标题区上间距 */
    padding: calc(72px + 20px) 30px 2rem;
    background:
        radial-gradient(circle at top, rgba(235, 205, 164, 0.12) 0%, rgba(235, 205, 164, 0) 28%),
        linear-gradient(180deg, var(--opc-bg-base, #070707) 0%, var(--opc-bg-mid, #120f0c) 42%, var(--opc-bg-deep, #090909) 100%);
}

/* 与 opc.html 配套：顶栏 sticky 后由本规则收紧上内边距并参与 flex 撑满剩余高度 */
body#body:has(.opc-showcase-inner) .opc-showcase {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 30px 1.5rem;
}

body[data-opc-nav-scope='workspace']#body:has(.opc-showcase-inner) .opc-showcase {
    padding-top: clamp(6px, 1.5vw, 12px);
}

body[data-opc-theme='official']:has(.opc-theme-page--subscription) .opc-showcase,
body[data-opc-theme='official']:has(.opc-theme-page--compute) .opc-showcase,
body[data-opc-theme='official']:has(.opc-theme-page--orders) .opc-showcase,
body[data-opc-theme='official']:has(.opc-theme-page--plans) .opc-showcase,
body[data-opc-theme='official']:has(.opc-theme-page--plan-detail) .opc-showcase {
    background: #070707 !important;
}

@media screen and (max-width: 768px) {
    body#body:has(.opc-showcase-inner):has(.opc-theme-page--subscription) .opc-showcase,
    body#body:has(.opc-showcase-inner):has(.opc-theme-page--compute) .opc-showcase,
    body#body:has(.opc-showcase-inner):has(.opc-theme-page--orders) .opc-showcase,
    body#body:has(.opc-showcase-inner):has(.opc-theme-page--plans) .opc-showcase,
    body#body:has(.opc-showcase-inner):has(.opc-theme-page--plan-detail) .opc-showcase {
        padding-top: 8px;
        padding-bottom: 0;
    }
}

body[data-opc-nav-scope='workspace'] .head_nav.opc-embed-nav .menu_nav {
    align-items: center;
}
.opc-showcase-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    box-sizing: border-box;
}
.opc-showcase-head {
    flex-shrink: 0;
    text-align: left;
    margin-bottom: 1rem;
}
/* 与创意工作台页一致：左侧金条 + 渐变标题（勿写死 color/font-size，由 common .opc-heading-gold* 控制） */
.opc-showcase-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0.9rem;
}
.opc-showcase-head-bar {
    flex-shrink: 0;
    display: block;
    width: 4px;
    height: clamp(26px, 4vw, 34px);
    margin-top: 4px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #f0d49a 0%,
        #e6b980 45%,
        #c4934a 100%
    );
    box-shadow: 0 0 12px rgba(230, 185, 128, 0.25);
}
.opc-showcase-head h1 {
    margin: 4px 0 0;
}
.opc-showcase-head p {
    max-width: 760px;
    margin: 0;
}
.opc-showcase-head .opc-prefill-lead {
    max-width: 760px;
    margin: 0.75rem 0 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
}
.opc-switch-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1rem;
}
.opc-switch-bar__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.opc-switch-bar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
}
.opc-switch-bar__mid:empty {
    display: none;
}
.opc-switch-bar__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.opc-switch-bar__tools:empty {
    display: none;
}
/* 网页版（≥1280）：侧栏常驻，隐藏 Tab 旁历史/使用说明图标；手机窄屏由 Vue Teleport 注入 */
@media (min-width: 1280px) {
    body[data-opc-theme='official'] .opc-switch-bar__tools,
    body[data-opc-theme='official'] .opc-conv-switch-tool-btn,
    body[data-opc-theme='official'] .opc-switch-create-conv-btn {
        display: none !important;
    }
}
.opc-conv-switch-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #ebcda4f5;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.opc-conv-switch-tool-btn:hover,
.opc-conv-switch-tool-btn:focus-visible {
    background: rgba(235, 205, 164, 0.1);
    outline: none;
}
.opc-conv-switch-tool-btn--active {
    background: rgba(235, 205, 164, 0.14);
    color: #fff2d2;
}
.opc-conv-switch-tool-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}
.opc-conv-switch-tool-btn__glyph {
  font-size: 16px;
  line-height: 1;
}
.opc-switch-btn {
    min-width: 132px;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--opc-radius-pill, 999px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: var(--glass-shadow);
}
.opc-switch-btn:hover,
.opc-switch-btn.active {
    background: rgba(209, 160, 84, 0.12);
    border-color: rgba(209, 160, 84, 0.4);
    color: rgba(252, 244, 224, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(230, 185, 128, 0.08);
}
.opc-panel-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow-glow);
    overflow: hidden;
}

/* 官网 OPC 嵌入：去掉 Vue 容器外框，高度由 .opc-showcase-inner 与 #app flex 分配；对话区外框由 opc-client/style.css 官网主题覆盖 */
body[data-opc-theme='official'] .opc-panel-wrap {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Vue 挂载点：在 overflow:hidden 的壳内自行滚动，避免「我的算力/订阅」购买区下方被裁掉看不见 */
.opc-panel-wrap > #app {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 会员页滚动在 .opc-showcase（全宽，含左右留白）；#app 仅承载内容，见 opc-client/style.css */
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--subscription),
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--compute),
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--orders),
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--plans),
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--plan-detail) {
    overflow: visible !important;
}

body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--subscription) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--compute) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--orders) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--plans) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app:has(.opc-theme-page--plan-detail) > div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 订阅 / 算力 / 订单：仅 #app 滚动，main 勿再叠一层（与 opc-mobile.css 一致，避免表底卡住） */
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main.opc-main--member-scroll,
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--subscription),
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--compute),
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--orders) {
    overflow: visible !important;
}

body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--subscription) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--compute) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--orders) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--plans) > div,
body[data-opc-theme='official'] .opc-panel-wrap > #app > div > main:has(.opc-theme-page--plan-detail) > div {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
}

body[data-opc-theme='official'] .opc-theme-page--subscription.opc-subscription-compact {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
}
.opc-panel {
    display: none;
    padding: 38px 42px 42px;
}
.opc-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* —— 我的方案（图1）—— */
.opc-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.opc-section-head-bar {
    width: 4px;
    min-height: 24px;
    margin-top: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f0d49a 0%, #e6b980 45%, #c4934a 100%);
    flex-shrink: 0;
}
.opc-section-head-text h2 {
    margin: 0;
}
.opc-section-head-text p {
    margin: 6px 0 0;
}
.opc-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}
.opc-plan-card {
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.25s ease;
}
.opc-plan-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.opc-plan-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.5;
}
.opc-plan-detail-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(235, 205, 164, 0.45);
    background: transparent;
    color: rgba(235, 205, 164, 0.95);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.opc-plan-detail-btn:hover {
    background: rgba(235, 205, 164, 0.1);
}
.opc-plan-points {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
    margin-top: -4px;
}
.opc-plan-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.opc-plan-badge--normal {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.opc-plan-badge--expert {
    background: rgba(235, 205, 164, 0.14);
    color: rgba(235, 205, 164, 0.96);
    border: 1px solid rgba(235, 205, 164, 0.35);
}
.opc-plan-summary {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}
.opc-plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(235, 205, 164, 0.1);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.42);
}
.opc-plan-regen {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(235, 205, 164, 0.42);
    background: transparent;
    color: rgba(235, 205, 164, 0.92);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.opc-plan-regen:hover {
    background: rgba(235, 205, 164, 0.08);
}

/* —— 我的算力（图2）—— */
.opc-power-stack {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.opc-power-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.opc-power-panel {
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    padding: 22px;
}
.opc-power-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.opc-power-stat {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.opc-power-stat label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 6px;
}
.opc-power-stat strong {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
}
.opc-power-total {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.opc-power-total label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
}
.opc-power-total-num {
    display: block;
    margin-top: 6px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #e6b980;
}

/* 官网「购买算力包」：图2 黑金行样式 + 图1 能力（支付方式、赠送说明、超时提示） */
.opc-official-purchase-body {
    margin-top: 14px;
    padding: 16px 18px 18px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow);
}
.opc-official-pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-bottom: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
}
.opc-official-pay-opt {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}
.opc-official-pay-opt input[type='radio'] {
    width: 16px;
    height: 16px;
    accent-color: #14b8a6;
    cursor: pointer;
}
.opc-official-packages-empty {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(232, 224, 212, 0.88);
}
.opc-official-packages {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.opc-official-pkg-row {
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.opc-official-pkg-row:last-child {
    border-bottom: none;
}
.opc-official-pkg-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 10px 14px;
    align-items: center;
}
.opc-official-pkg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}
.opc-official-pkg-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    min-width: 0;
}
.opc-official-pkg-values {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.opc-official-pkg-points-num,
.opc-official-pkg-yuan-num {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.opc-official-pkg-yuan-num {
    font-weight: 600;
}
.opc-official-pkg-unit {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(235, 205, 164, 0.42);
}
.opc-official-pkg-yuan .opc-official-pkg-unit {
    margin-left: 3px;
}
.opc-official-pkg-buy {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(180deg, #f0d49a 0%, #e6b980 100%);
    color: #3d2e0a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.opc-official-pkg-buy:hover:not(:disabled) {
    filter: brightness(1.06);
}
.opc-official-pkg-buy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.opc-official-pkg-detail {
    margin: 4px 0 0;
    padding-left: 2px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.42);
}
.opc-official-purchase-foot {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.38);
}
.opc-power-table-wrap {
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
}
.opc-power-table-wrap.opc-member-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.opc-power-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.opc-power-table th {
    background: rgba(0, 0, 0, 0.45);
    color: rgba(235, 205, 164, 0.88);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(235, 205, 164, 0.12);
}
.opc-power-table td {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.opc-power-table tr:last-child td {
    border-bottom: none;
}
.opc-td-neg {
    color: #FCA5A5;
    font-weight: 500;
}

/* —— 订阅（图3）—— */
.opc-sub-stack {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.opc-version-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.opc-version-card {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    padding: 22px 22px 18px;
    transition: all 0.25s ease;
}
.opc-version-rec {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(235, 205, 164, 0.18);
    color: rgba(235, 205, 164, 0.98);
    font-size: 11px;
    font-weight: 600;
}
.opc-version-card h3 {
    margin: 0 0 16px;
    font-size: 1.08rem;
    font-weight: 600;
    color: #fff;
}
.opc-version-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
}
.opc-version-row:last-child {
    margin-bottom: 0;
}
.opc-version-ok {
    color: #e6b980;
    flex-shrink: 0;
    font-weight: 700;
}
.opc-version-no {
    color: #FCA5A5;
    flex-shrink: 0;
    font-weight: 700;
}
.opc-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.opc-account-card {
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    padding: 22px;
}
.opc-price-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 16px;
}
.opc-price-pill {
    padding: 11px 16px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s ease;
}
.opc-price-pill:hover {
    border-color: rgba(235, 205, 164, 0.4);
}
.opc-price-pill.active {
    border-color: rgba(235, 205, 164, 0.65);
    background: rgba(235, 205, 164, 0.12);
    color: rgba(235, 205, 164, 0.98);
}
.opc-subscribe-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(180deg, #f0d49a 0%, #e6b980 45%, #c4934a 100%);
    color: #1a1208;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.opc-subscribe-btn:hover {
    filter: brightness(1.06);
}
.opc-account-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}
.opc-account-status-row:last-child {
    border-bottom: none;
}
.opc-account-status-row span:first-child {
    color: rgba(255, 255, 255, 0.45);
}
.opc-account-status-row span:last-child {
    color: rgba(235, 205, 164, 0.95);
    font-weight: 600;
    text-align: right;
}

/* —— 创意工作台 · AI 对话（静态示意）—— */
.opc-panel[data-content="aidialog"] > p {
    flex-shrink: 0;
}
.opc-chat-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: clamp(280px, calc(100vh - 380px), 1100px);
    min-width: 0;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow-lg);
}
.opc-chat-sidebar {
    border-right: 1px solid rgba(235, 205, 164, 0.12);
    display: flex;
    flex-direction: column;
    background: rgba(16, 14, 12, 0.98);
    min-height: 0;
}
.opc-chat-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.opc-chat-side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.opc-chat-side-title::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(235, 205, 164, 0.55);
    box-sizing: border-box;
}
.opc-chat-new-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #f0d49a 0%, #e6b980 55%, #c4934a 100%);
    color: #2a1f08;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
}
.opc-chat-new-btn:hover {
    filter: brightness(1.08);
}
.opc-chat-thread-list {
    list-style: none;
    margin: 0;
    padding: 10px;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
}
.opc-chat-thread {
    padding: 12px 11px;
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}
.opc-chat-thread:hover {
    background: rgba(255, 255, 255, 0.04);
}
.opc-chat-thread--active {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(235, 205, 164, 0.5);
}
.opc-chat-thread-time {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 6px;
}
.opc-chat-thread-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.45;
    margin-bottom: 8px;
}
.opc-chat-thread-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
}
.opc-chat-thread--active .opc-chat-thread-meta {
    color: rgba(235, 205, 164, 0.75);
}
.opc-chat-thread-icon {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid rgba(235, 205, 164, 0.65);
    flex-shrink: 0;
    box-sizing: border-box;
}
.opc-chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 22px 18px;
    background: rgba(12, 11, 10, 0.6);
}
.opc-chat-main-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.opc-chat-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.08em;
}
.opc-chat-h2 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #f7e6bc 0%, #e6b980 40%, #c4934a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.opc-chat-batch {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(235, 205, 164, 0.88);
    white-space: nowrap;
    padding-top: 4px;
}
.opc-chat-batch-icon {
    font-size: 13px;
    opacity: 0.9;
}
.opc-chat-board {
    flex: 1;
    min-height: 280px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.opc-msg {
    max-width: min(88%, 520px);
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.68;
}
.opc-msg--ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.opc-msg--user {
    align-self: flex-end;
    background: rgba(48, 40, 32, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(235, 205, 164, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.opc-chat-compose {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    align-items: center;
    flex-shrink: 0;
}
.opc-chat-compose-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.opc-chat-compose input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    outline: none;
    font-family: inherit;
}
.opc-chat-compose input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}
.opc-chat-compose input:focus {
    border-color: rgba(235, 205, 164, 0.3);
    box-shadow: 0 0 0 2px rgba(235, 205, 164, 0.06), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.opc-chat-send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(180deg, #f0d49a 0%, #e6b980 45%, #c4934a 100%);
    color: #1a1208;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.opc-chat-send:hover {
    filter: brightness(1.06);
}
.opc-chat-send-icon {
    font-size: 13px;
    line-height: 1;
}
/* 自定义模型下拉：避免系统原生 <select> 蓝底高亮，与官网金棕主题一致 */
.opc-chat-model-wrap {
    position: relative;
    flex-shrink: 0;
    min-width: 118px;
}
.opc-chat-model-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.opc-chat-model-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(235, 205, 164, 0.92);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.opc-chat-model-trigger:focus-visible {
    border-color: rgba(235, 205, 164, 0.55);
    box-shadow: 0 0 0 2px rgba(235, 205, 164, 0.08);
}
.opc-chat-model-trigger-chev {
    font-size: 10px;
    line-height: 1;
    opacity: 0.72;
    transition: transform 0.2s ease;
}
.opc-chat-model-trigger[aria-expanded="true"] .opc-chat-model-trigger-chev {
    transform: rotate(180deg);
}
.opc-chat-model-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(20, 18, 16, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--glass-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.opc-chat-model-opt {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(235, 205, 164, 0.92);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.opc-chat-model-opt:hover {
    background: rgba(235, 205, 164, 0.1);
}
.opc-chat-model-opt:focus-visible {
    background: rgba(235, 205, 164, 0.12);
    box-shadow: inset 0 0 0 1px rgba(235, 205, 164, 0.35);
}
.opc-chat-model-opt.is-selected {
    background: linear-gradient(180deg, rgba(240, 212, 154, 0.42) 0%, rgba(196, 147, 74, 0.48) 100%);
    color: #1a1208;
}
.opc-chat-model-opt.is-selected:hover {
    filter: brightness(1.05);
}
.opc-chat-plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(235, 205, 164, 0.48);
    background: transparent;
    color: rgba(235, 205, 164, 0.95);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.opc-chat-plan-btn:hover {
    background: rgba(235, 205, 164, 0.08);
    border-color: rgba(235, 205, 164, 0.65);
}

@media screen and (max-width: 768px) {
    .opc-showcase {
        /* 移动端顶栏 .nav_m_con 高度 2.7rem + 20px；左右与顶栏内容区对齐 */
        padding: calc(2.7rem + 20px) 16px 2.8rem;
        min-height: 100vh;
    }
    body#body:has(.opc-showcase-inner) .opc-showcase {
        padding: 20px 16px 2.8rem;
        min-height: 0;
    }
    .opc-switch-bar {
        gap: 8px;
        margin-bottom: 12px;
    }
    .opc-panel {
        padding: 1rem;
    }
    .opc-plans-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 16px;
    }
    .opc-plan-card {
        padding: 16px 14px 14px;
    }
    .opc-plan-title {
        font-size: 0.88rem;
    }
    .opc-power-top-row,
    .opc-version-grid,
    .opc-account-grid {
        grid-template-columns: 1fr;
    }
    .opc-power-mini-grid {
        grid-template-columns: 1fr;
    }
    .opc-official-pkg-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 6px 12px;
    }
    .opc-official-pkg-badge {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .opc-official-pkg-name {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }
    .opc-official-pkg-values {
        grid-column: 1;
        grid-row: 3;
        justify-content: flex-start;
    }
    .opc-official-pkg-buy {
        grid-column: 2;
        grid-row: 2 / 4;
        width: auto;
        justify-self: end;
        align-self: center;
        margin-top: 0;
    }
    .opc-power-table {
        font-size: 11px;
    }
    .opc-power-table th,
    .opc-power-table td {
        padding: 8px 10px;
    }
    .opc-price-pills {
        flex-direction: column;
    }
    .opc-price-pill {
        width: 100%;
        text-align: center;
    }
    .opc-chat-shell {
        grid-template-columns: 1fr;
        flex: 1;
        min-height: min(420px, calc(100vh - 320px));
    }
    .opc-chat-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(235, 205, 164, 0.12);
        max-height: 220px;
    }
    .opc-chat-thread-list {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;
    }
    .opc-chat-thread {
        flex: 0 0 72%;
        margin-bottom: 0;
    }
    .opc-chat-main {
        padding: 14px 12px;
    }
    .opc-chat-h2 {
        font-size: 1.2rem;
    }
    .opc-chat-board {
        min-height: 220px;
    }
    .opc-msg {
        max-width: 94%;
        font-size: 13px;
    }
    .opc-chat-compose {
        flex-direction: column;
        align-items: stretch;
    }
    .opc-chat-compose-actions {
        justify-content: flex-end;
    }
    .opc-chat-model-wrap {
        flex: 1;
        min-width: 0;
    }
}

/* OPC / 工具页共用：黑金渐变主标题（自 common.css 摘录，供 opc-shell / opc-client 独立运行） */
.opc-heading-gold {
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7e6bc 38%,
    #e6b980 58%,
    #c4934a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(230, 185, 128, 0.35));
}
.opc-heading-gold-size {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.15;
}

/* opc-client SPA：无官网顶栏时收紧上内边距；单面板承载 Vue 路由 */
.opc-showcase.opc-showcase--spa {
  padding: 24px 30px 2rem;
  min-height: 100%;
}
.opc-panel.opc-panel--spa {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.opc-vue-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px 32px;
}
.opc-shell-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  margin-top: 12px;
}
.opc-shell-toolbar .opc-shell-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(235, 205, 164, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(235, 205, 164, 0.95);
  font-size: 12px;
  font-weight: 600;
}
.opc-shell-toolbar .opc-shell-chip--muted {
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
}
.opc-shell-toolbar button.opc-shell-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(235, 205, 164, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.opc-shell-toolbar button.opc-shell-btn:hover {
  background: rgba(235, 205, 164, 0.1);
  border-color: rgba(235, 205, 164, 0.5);
}
.opc-shell-toolbar .opc-shell-btn--accent {
  border-color: rgba(235, 205, 164, 0.55);
  background: linear-gradient(180deg, rgba(240, 212, 154, 0.35) 0%, rgba(196, 147, 74, 0.35) 100%);
  color: #1a1208;
}
@media screen and (max-width: 768px) {
  .opc-showcase.opc-showcase--spa {
    padding: 20px 16px 2.8rem;
  }
  .opc-vue-stage {
    padding: 16px 14px 20px;
  }
}

.opc-shell-chip.opc-shell-chip--compute-neg {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}
.opc-shell-chip.opc-shell-chip--compute-warn {
  color: #fde68a;
  border-color: rgba(253, 224, 71, 0.35);
}
.opc-client-shell {
  min-height: 100%;
}

.account-link.is-active,
.account-hub-btn.is-active {
  color: rgba(235, 205, 164, 0.98);
}

.account-link.is-active {
  color: rgba(245, 236, 212, 0.98);
  text-decoration: none;
}

.account-hub.account-hub--active .account-hub-trigger {
  color: rgba(235, 205, 164, 0.98);
}

.opc-embed-nav .account-hub-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 14rem;
  line-height: 1.2;
  box-sizing: border-box;
}
.opc-embed-nav .account-hub-trigger-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: rgba(235, 205, 164, 0.95);
}
.opc-embed-nav .account-hub-trigger-icon svg {
  display: block;
}
.opc-embed-nav .account-hub-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 会员中心：昵称 + 脱敏登录账号 */
.account-hub-user-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(87, 67, 3, 0.2);
}
.opc-embed-nav .account-hub-nickname {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(87, 67, 3, 0.98);
}
.opc-embed-nav .account-hub-login-hint {
  display: none !important;
  font-size: 12px;
  line-height: 1.4;
}

/* 会员中心下拉：订阅 / 我的算力 并排，我的订单 次要入口 */
.account-hub-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.opc-embed-nav .account-hub-btn.account-hub-btn--half {
  flex: 1;
  margin-top: 0;
  min-width: 0;
  box-sizing: border-box;
  font-size: 13px;
  padding-left: 8px;
  padding-right: 8px;
}
.opc-embed-nav .account-hub-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid rgba(87, 67, 3, 0.42);
  background: rgba(255, 255, 255, 0.28);
  color: rgba(87, 67, 3, 0.98) !important;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.35;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
.opc-embed-nav .account-hub-link:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(209, 160, 84, 0.55);
}
.account-hub-link.is-active {
  border-color: rgba(209, 160, 84, 0.65) !important;
  box-shadow: inset 0 0 0 1px rgba(209, 160, 84, 0.28);
}

/* 网页端：我的订单 + 分享送算力 并排（样式与订阅/我的算力一致）；手机端见 opc-mobile.css 恢复纵排 */
@media (min-width: 769px) {
  .account-hub-actions-row--split-links {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }

  .opc-embed-nav .account-hub-link.account-hub-link--half {
    flex: 1;
    margin-top: 0;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .account-hub-actions-row--split-links {
    display: block;
    margin-top: 0;
  }

  .account-hub-actions-row--split-links .account-hub-link {
    margin-top: 10px;
  }
}

/* 公用顶栏挂载点（partials/site-header.html）：不参与盒模型，子节点布局与原先一致 */
#opc-site-header-root {
  display: contents;
}

body[data-opc-theme='official'].auth-modal-page .opc-showcase,
body[data-opc-theme='official'].auth-modal-page #opc-site-header-root {
  visibility: hidden !important;
  pointer-events: none !important;
}
body[data-opc-nav-scope='workspace'] .opc-showcase-title-row {
    display: none !important;
}

body[data-opc-nav-scope='workspace'] .opc-showcase-head:not(:has(.opc-prefill-lead:not([hidden]))) {
    display: none !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* 顶栏：乾坤智能 logo + OPC 汇智服务 同一行，字号随屏宽自适应（与 logo 视觉等高） */
.opc-nav-brand-title {
    display: none;
}

body[data-opc-nav-scope='workspace'] .opc-nav-brand {
    display: inline-flex !important;
    align-items: center;
    gap: clamp(6px, 1.8vw, 12px);
    max-width: min(78vw, 22rem);
    text-decoration: none;
    vertical-align: middle;
    cursor: default;
}

body[data-opc-nav-scope='workspace'] .opc-nav-brand-title {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    font-size: var(--opc-nav-brand-title-size, clamp(16px, 4.8vw, 22px));
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(48vw, 14rem);
    filter: drop-shadow(0 2px 12px rgba(230, 185, 128, 0.28));
}

/* 与 opc-showcase-head-bar 一致：标题前金竖线 */
body[data-opc-nav-scope='workspace'] .opc-nav-brand-title::before {
    content: '';
    flex-shrink: 0;
    display: block;
    width: clamp(3px, 0.85vw, 4px);
    height: clamp(18px, 4.8vw, 26px);
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #f0d49a 0%,
        #e6b980 45%,
        #c4934a 100%
    );
    box-shadow: 0 0 12px rgba(230, 185, 128, 0.25);
}

body[data-opc-nav-scope='workspace'] .opc-nav-brand .logo_b {
    width: clamp(88px, 22vw, 131px) !important;
    height: clamp(22px, 5.8vw, 32px) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    object-fit: contain;
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    body[data-opc-nav-scope='workspace'] .nav_m_con {
        padding-right: 0.35rem;
    }

    body[data-opc-nav-scope='workspace'] .nav_m_con .opc-nav-brand {
        display: inline-flex !important;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        max-width: calc(100% - 2.2rem);
        gap: clamp(4px, 1.2vw, 8px);
    }

    body[data-opc-nav-scope='workspace'] .nav_m_con .m_logo img,
    body[data-opc-nav-scope='workspace'] .nav_m_con .opc-nav-brand .logo_b {
        width: clamp(3.25rem, 18vw, 5rem) !important;
        height: clamp(0.82rem, 3.8vw, 1.2rem) !important;
        max-height: 1.2rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        object-fit: contain;
        flex-shrink: 0;
    }

    body[data-opc-nav-scope='workspace'] .nav_m_con .opc-nav-brand-title {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: clamp(4px, 1.2vw, 8px);
        font-size: clamp(12px, 3.2vw, 15px);
        line-height: 1.15;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: none;
    }

    body[data-opc-nav-scope='workspace'] .nav_m_con .opc-nav-brand-title::before {
        width: 2px;
        height: clamp(13px, 3.4vw, 17px);
    }
}

/* OPC 工作区：PC 顶栏隐藏一级营销菜单（首页 / AI工具 / 产品服务 / 解决方案 / 关于乾坤） */
body[data-opc-nav-scope='workspace'] .head_nav.opc-embed-nav .menu_main {
    display: none !important;
}

/* OPC 工作区：手机抽屉仅保留登录/会员相关，隐藏官网营销导航（保留 data-opc-route 与分享送算力） */
body[data-opc-nav-scope='workspace'] .opc-embed-nav-mobile .m_nav_ul.m_nav_d > li:not(.m_nav_divider):not(.m_nav_account):not(:has([data-opc-route])):not(:has([data-opc-share-referral])) {
    display: none !important;
}

/* 移动端内测登录：隐藏官网顶栏、产品切换与展示标题（html/body 双挂 class，首屏脚本即可生效） */
html.opc-mobile-auth-page #opc-site-header-root,
html.opc-mobile-auth-page .head_nav,
html.opc-mobile-auth-page .nav_pc,
html.opc-mobile-auth-page .nav_mobile,
html.opc-mobile-auth-page .nav_mobile.opc-embed-nav-mobile,
html.opc-mobile-auth-page .nav_m_con,
body.opc-mobile-auth-page #opc-site-header-root,
body.opc-mobile-auth-page .head_nav,
body.opc-mobile-auth-page .nav_pc,
body.opc-mobile-auth-page .nav_mobile,
body.opc-mobile-auth-page .nav_mobile.opc-embed-nav-mobile,
body.opc-mobile-auth-page .nav_m_con {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html.opc-mobile-auth-page .opc-showcase-head,
html.opc-mobile-auth-page .opc-switch-bar,
html.opc-mobile-auth-page .opc-showcase-title-row,
html.opc-mobile-auth-page #opc-prefill-lead,
body.opc-mobile-auth-page .opc-showcase-head,
body.opc-mobile-auth-page .opc-switch-bar,
body.opc-mobile-auth-page .opc-showcase-title-row,
body.opc-mobile-auth-page #opc-prefill-lead {
  display: none !important;
}

html.opc-mobile-auth-page section.middle_con.black-bg,
body.opc-mobile-auth-page section.middle_con.black-bg {
  min-height: 100dvh;
  padding: 0;
}

html.opc-mobile-auth-page .opc-showcase,
html.opc-mobile-auth-page .opc-showcase-inner,
body.opc-mobile-auth-page .opc-showcase,
body.opc-mobile-auth-page .opc-showcase-inner {
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  max-width: none;
}

html.opc-mobile-auth-page .opc-panel-wrap,
html.opc-mobile-auth-page .opc-panel-wrap > #app,
body.opc-mobile-auth-page .opc-panel-wrap,
body.opc-mobile-auth-page .opc-panel-wrap > #app {
  min-height: 100dvh;
  width: 100%;
}