/* ============================================================
   shell.css —— 控制台外壳与通用组件
   ------------------------------------------------------------
   两行吸顶外壳（顶栏 56 + 工具行 48）＋ 内容列（最大 1320 居中）。
   行高全部来自定义（--cc-header-h / --cc-toolbar-h），不做任何
   运行时量测，避免外壳自量自锁。
   ============================================================ */

/* ---------- 1. 顶栏 ---------- */
.cc-header {
    position: sticky;
    top: 0;
    z-index: var(--cc-z-sticky);
    height: var(--cc-header-h);
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-line);
}

.cc-header-in {
    height: 100%;
    max-width: var(--cc-content-w);
    margin: 0 auto;
    padding: 0 var(--cc-page-x);
    display: flex;
    align-items: center;
    gap: var(--cc-sp-4);
}

.cc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--cc-text);
    text-decoration: none;
}

.cc-brand:hover {
    text-decoration: none;
}

.cc-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--cc-brand), var(--cc-brand-hover));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cc-shadow-1);
}

.cc-brand-txt {
    font-size: var(--cc-fs-lg);
    font-weight: 700;
    white-space: nowrap;
}

.cc-brand-txt small {
    font-size: var(--cc-fs-xs);
    font-weight: 500;
    color: var(--cc-text-3);
    margin-left: 6px;
}

/* ---------- 2.1 域导航与面板标签（分节导航 · 唯一形态） ----------
   胶囊本体来自公共层：容器 .mz-chips、按钮 .mz-chip、选中 is-active（第 41 轮）。
   管理节点这边只补两处排布差异，别的一概不重写：
     ① 工具行里吃掉剩余宽度、内容列里留自己的间距；
     ② 「图标 + 文字」的横向对齐（公共 .mz-chip 没有内置 flex）。
   胶囊的玻璃底色与模糊**沿用公共层原样**，管理节点不再另给一层实底。 */
.cc-nav.mz-chips {
    flex: 1 1 auto;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.cc-nav.mz-chips .mz-chip,
.cc-tabs.mz-chips .mz-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cc-account {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    flex: 0 0 auto;
}

.cc-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: var(--cc-ctl-h);
    padding: 0 8px 0 4px;
    border-radius: var(--cc-r-full);
    /* 顶栏里的用户名只是一个标签：只描边，不铺底（顶栏本身已是那块玻璃） */
    border: 1px solid transparent;
    background: transparent;
    color: var(--cc-text-2);
    font-size: var(--cc-fs-sm);
}

.cc-user:hover {
    border-color: var(--mz-line);
}

.cc-user.is-guest {
    background: none;
    padding: 0;
}

.cc-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    flex: 0 0 auto;
}

.cc-user-name {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 2. 工具行 ---------- */
/* 全站原则：吸顶件要躲开顶栏下沿那层「渐变模糊」。
   顶栏的 .mz-topbar::after 会把顶栏以下 72px（窄屏 48px）渐隐着糊掉，
   原来这条工具行按 --mz-topbar-h 贴顶，整行正好落在那条带里 —— 表现为
   域导航胶囊像被一层雾压住。现在两头都让位（让位量 = 渐隐带的三分之一 + 4px ≈ 28）：
     · 正常流里 margin-top 同上（不吸顶时也在雾最浓的那段之外）；
     · 吸顶位置 = --mz-sticky-top（顶栏实测高 + 让位量），滚动时位置一致。 */
.cc-toolbar {
    position: sticky;
    top: var(--mz-sticky-top, calc(var(--mz-topbar-h, 64px) + 28px));
    z-index: calc(var(--cc-z-sticky) - 1);
    margin-top: calc(var(--mz-sticky-avoid, 24px) + var(--mz-sticky-gap, 4px));
    height: var(--cc-toolbar-h);
    /* 261101 一屏一底色：工具条**全透明、不再自带模糊**——
       模糊只属于全站顶栏那一层（.mz-topbar::after），工具行自己再叠一层模糊，
       会在页面中间切出一条颜色不同的横带，看着「割裂」。 */
    background: transparent;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cc-toolbar-in {
    height: 100%;
    max-width: var(--cc-content-w);
    margin: 0 auto;
    padding: 0 var(--cc-page-x);
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
}

.cc-actions {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    flex: 0 0 auto;
}

/* ---------- 3. 内容列与面板条 ---------- */
.cc-main {
    max-width: var(--cc-content-w);
    margin: 0 auto;
    padding: var(--cc-sp-4) var(--cc-page-x) var(--cc-sp-6);
}

/* 面板标签同样是 .mz-chips + .mz-chip（第 41 轮），这里只留内容列里的间距 */
.cc-tabs.mz-chips {
    margin: 0 0 var(--cc-sp-3);
    padding: 0 0 4px;
    gap: 6px;
}

.cc-pane[hidden] {
    display: none;
}

.cc-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: var(--cc-sp-3);
    border-radius: var(--cc-r-sm);
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
    font-size: var(--cc-fs-sm);
}

.cc-note[data-kind="error"] {
    background: var(--cc-danger-soft);
    color: var(--cc-danger);
}

.cc-note[data-kind="warn"] {
    background: var(--cc-warn-soft);
    color: var(--cc-warn);
}

/* ---------- 4. 页脚 ---------- */
.cc-foot {
    max-width: var(--cc-content-w);
    margin: 0 auto;
    padding: var(--cc-sp-5) var(--cc-page-x) var(--cc-sp-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--cc-sp-2) var(--cc-sp-4);
    color: var(--cc-text-3);
    font-size: var(--cc-fs-xs);
    border-top: 1px solid var(--cc-line);
}

.cc-foot a {
    color: var(--cc-text-3);
}

.cc-foot a:hover {
    color: var(--cc-text-2);
}

/* 「频道子站」列：用语规范 §5.11 六项固定（本站自身可省），四站页脚同用 */
.cc-foot-col {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--cc-sp-2) var(--cc-sp-3);
}

.cc-foot-col > span {
    color: var(--cc-text-3);
}

/* 迷路页（404）卡片里的小出口组 */
.cc-lost-sites {
    margin-top: var(--cc-sp-5);
}

/* ---------- 5. 按钮 ---------- */
/* 与全站 .btn 同源：胶囊 + 半透明玻璃 + 磨砂，不再用后台那块纯色方角按钮 */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--cc-ctl-h);
    padding: 0 14px;
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius-pill);
    background: var(--mz-surface-comp);
    color: var(--mz-ink);
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    transition: background var(--cc-dur) var(--cc-ease), border-color var(--cc-dur) var(--cc-ease),
        color var(--cc-dur) var(--cc-ease), transform var(--cc-dur) var(--cc-ease);
}

.cc-btn:hover {
    background: var(--mz-surface-card);
    border-color: var(--mz-accent);
    color: var(--mz-accent);
}

.cc-btn:active {
    transform: translateY(1px);
}

.cc-btn[disabled],
.cc-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.cc-btn--primary {
    background: var(--cc-brand);
    border-color: var(--cc-brand);
    color: #fff;
}

.cc-btn--primary:hover {
    background: var(--cc-brand-hover);
    border-color: var(--cc-brand-hover);
}

.cc-btn--danger {
    color: var(--cc-danger);
    border-color: color-mix(in srgb, var(--cc-danger) 40%, transparent);
    background: var(--mz-surface-comp);
}

.cc-btn--danger:hover {
    background: var(--cc-danger-soft);
}

.cc-btn--ghost {
    border-color: transparent;
    background: none;
}

.cc-btn--ghost:hover {
    background: var(--cc-hover);
}

.cc-btn--sm {
    height: 28px;
    padding: 0 10px;
    font-size: var(--cc-fs-xs);
}

.cc-btn--icon {
    width: var(--cc-ctl-h);
    padding: 0;
}

.cc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cc-ctl-h);
    height: var(--cc-ctl-h);
    border-radius: var(--cc-r-sm);
    color: var(--cc-text-2);
    transition: background var(--cc-dur) var(--cc-ease), color var(--cc-dur) var(--cc-ease);
}

.cc-icon-btn:hover {
    background: var(--cc-hover);
    color: var(--cc-text);
}

/* ---------- 6. 表单控件 ---------- */
.cc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-label {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    color: var(--cc-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-label .req {
    color: var(--cc-danger);
}

.cc-hint {
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
}

.cc-input,
.cc-select,
.cc-textarea {
    width: 100%;
    min-height: var(--cc-ctl-h);
    padding: 7px 11px;
    border: 1px solid var(--mz-line);
    border-radius: var(--cc-r-sm);
    /* 输入框只靠描边立界：底层已经是卡片那张纸，再铺一层白会变成「卡里的卡」 */
    background: transparent;
    color: var(--mz-ink);
    font-size: var(--cc-fs-md);
    transition: border-color var(--cc-dur) var(--cc-ease), box-shadow var(--cc-dur) var(--cc-ease);
}

.cc-input::placeholder,
.cc-textarea::placeholder {
    color: var(--cc-text-3);
}

.cc-input:focus,
.cc-select:focus,
.cc-textarea:focus {
    outline: none;
    border-color: var(--cc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-brand) 22%, transparent);
}

.cc-select {
    appearance: none;
    padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--cc-text-3) 50%),
        linear-gradient(135deg, var(--cc-text-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.cc-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.7;
}

.cc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    cursor: pointer;
    user-select: none;
}

.cc-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-brand);
    cursor: pointer;
}

.cc-row-inline {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    flex-wrap: wrap;
}

.cc-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--cc-sp-4);
}

/* ---------- 7. 下拉菜单 ---------- */
.cc-menu-wrap {
    position: relative;
}

.cc-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: calc(var(--cc-z-sticky) + 1);
    min-width: 220px;
    max-height: min(60vh, 420px);
    overflow: auto;
    padding: 6px;
    /* 261101：下拉是浮层 —— 后台也取浮层档，与前台下拉同一浓度、同一磨砂，
       否则菜单底下压着的表格文字会透成重影 */
    background: var(--cc-surface-float, var(--cc-surface));
    -webkit-backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-md);
    box-shadow: var(--cc-shadow-3);
}

.cc-menu[hidden] {
    display: none;
}

.cc-menu--right {
    left: auto;
    right: 0;
}

.cc-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--cc-r-sm);
    color: var(--cc-text);
    font-size: var(--cc-fs-sm);
    text-align: left;
}

.cc-menu-item:hover {
    background: var(--cc-hover);
}

.cc-menu-item[aria-current="page"] {
    color: var(--cc-brand-text);
    background: var(--cc-brand-soft);
    font-weight: 700;
}

.cc-menu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--cc-line);
}

/* ---------- 8. 徽标与状态 ---------- */
/* 中性徽标只留描边（语义档在下面各自带色） */
.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid var(--mz-line);
    border-radius: var(--cc-r-full);
    background: transparent;
    color: var(--cc-text-2);
    font-size: var(--cc-fs-xs);
    font-weight: 500;
    white-space: nowrap;
}

.cc-badge--brand {
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
}

.cc-badge--ok {
    background: var(--cc-ok-soft);
    color: var(--cc-ok);
}

.cc-badge--warn {
    background: var(--cc-warn-soft);
    color: var(--cc-warn);
}

.cc-badge--danger {
    background: var(--cc-danger-soft);
    color: var(--cc-danger);
}

.cc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- 9. 浮层：模态 / 遮罩 / 提示 ---------- */
.cc-mask {
    position: fixed;
    inset: 0;
    z-index: var(--cc-z-mask);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cc-sp-4);
    background: color-mix(in srgb, #0b0f16 55%, transparent);
    backdrop-filter: blur(2px);
    animation: cc-fade var(--cc-dur) var(--cc-ease);
}

.cc-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    /* 261101：弹层与前台同档（浮层档）—— 遮罩已压暗，面板本身要读得清 */
    background: var(--cc-surface-float, var(--cc-surface));
    -webkit-backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-lg);
    box-shadow: var(--cc-shadow-3);
    overflow: hidden;
}

.cc-sheet--wide {
    max-width: 760px;
}

.cc-sheet-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    padding: var(--cc-sp-4) var(--cc-sp-5);
    border-bottom: 1px solid var(--cc-line);
}

.cc-sheet-title {
    font-size: var(--cc-fs-lg);
    font-weight: 700;
    flex: 1 1 auto;
}

.cc-sheet-body {
    padding: var(--cc-sp-5);
    overflow: auto;
}

.cc-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cc-sp-2);
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-top: 1px solid var(--cc-line);
    background: transparent;
}

@keyframes cc-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cc-rise {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cc-sheet {
    animation: cc-rise var(--cc-dur) var(--cc-ease);
}

.cc-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--cc-sp-5);
    transform: translateX(-50%);
    z-index: var(--cc-z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-sp-2);
    pointer-events: none;
}

.cc-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 16px;
    border-radius: var(--cc-r-full);
    background: var(--cc-notice-bg);
    color: var(--cc-notice-text);
    font-size: var(--cc-fs-sm);
    box-shadow: var(--cc-shadow-2);
    animation: cc-rise var(--cc-dur) var(--cc-ease);
}

.cc-toast[data-kind="error"] {
    background: var(--cc-danger);
    color: #fff;
}

.cc-toast[data-kind="ok"] {
    background: var(--cc-ok);
    color: #fff;
}

/* ---------- 10. 门禁：无权访问 / 仅 PC ---------- */
.cc-gate {
    position: fixed;
    inset: 0;
    z-index: var(--cc-z-mask);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cc-sp-5);
    background: var(--cc-bg);
}

.cc-gate-card {
    width: 100%;
    max-width: 420px;
    padding: var(--cc-sp-6) var(--cc-sp-5);
    text-align: center;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-lg);
    box-shadow: var(--cc-shadow-2);
}

.cc-gate-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--cc-sp-4);
    border-radius: 16px;
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
    font-size: var(--cc-fs-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-gate-title {
    font-size: var(--cc-fs-xl);
    margin-bottom: var(--cc-sp-2);
}

.cc-gate-desc {
    color: var(--cc-text-2);
    font-size: var(--cc-fs-sm);
    margin-bottom: var(--cc-sp-5);
}

.cc-gate-ops {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-2);
    justify-content: center;
}

/* ---------- 11. 窄屏：外壳先收一轮，手机端排布见 mobile.css ---------- */
@media (max-width: 900px) {
    .cc-brand-txt small {
        display: none;
    }

    .cc-user-name {
        display: none;
    }

    .cc-toolbar-in,
    .cc-header-in {
        padding: 0 var(--cc-sp-4);
    }

    .cc-main {
        padding: var(--cc-sp-3) var(--cc-sp-4) var(--cc-sp-5);
    }
}