/* ==========================================
   标签设计打印系统 - 全局样式表
   ========================================== */

/* CSS Variables */
/* ============================================================
   Design Token —— 遵循 TDesign 设计规范
   颜色主色 brand=#0052D9；中性灰采用 TDesign gray 体系；
   圆角偏小克制；阴影轻量；字号基准 14px。
   ============================================================ */
:root {
    /* 品牌主色 (TDesign --td-brand-color) */
    --color-blue: #0052D9;          /* brand-color */
    --color-blue-dark: #003CAB;     /* brand-color-active / hover */
    --color-blue-light: #ECF2FE;    /* brand-color-light */

    /* 功能色 (TDesign success/warning/error) */
    --color-green: #2BA471;
    --color-red: #D54941;
    --color-yellow: #E37318;
    --color-purple: #834EC2;
    --color-export: #E37318;

    /* 中性灰 (TDesign gray-1 ~ gray-10) */
    --bg-primary: #F3F3F3;          /* gray-1 页面底色 */
    --bg-secondary: #E7E7E7;        /* gray-2 */
    --bg-tertiary: #DCDCDC;         /* gray-3 */
    --bg-canvas: #F3F3F3;           /* 画布区底色 */
    --bg-surface: #FAFAFA;          /* gray-1 微调 */
    --bg-panel: #FFFFFF;            /* 面板/卡片 */

    --text-primary: #000000;        /* gray-10 主文字 */
    --text-secondary: #999999;      /* gray-6 次要文字 */
    --text-dark: #000000;           /* 强调文字 */
    --text-body: #4B4B4B;           /* gray-8 正文 */

    --border-color: #DCDCDC;        /* gray-3 边框 */
    --border-light: #EEEEEE;        /* gray-2 浅边框 */

    /* 圆角 (TDesign radius) */
    --radius-sm: 2px;               /* --td-radius-small */
    --radius-md: 3px;               /* --td-radius-default */
    --radius-lg: 6px;               /* --td-radius-medium */

    /* 阴影 (TDesign shadow，轻量) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.10);

    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dark);
    background: var(--bg-primary);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========== Top Toolbar ========== */
#toolbar {
    height: 48px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    padding: 0;
    gap: 16px;
    z-index: 100;
    flex-shrink: 0;
}

.toolbar-left {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 16px;
    box-sizing: border-box;
}

.logo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid var(--bg-tertiary);
}

.logo i {
    color: var(--color-blue);
    font-size: 20px;
}

.logo span {
    color: rgb(46, 54, 116);
    font-size: 14px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-group > label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.size-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-wrap {
    position: relative;
}

.input-wrap input {
    width: 64px;
    height: 30px;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 0 28px 0 8px;
    font-size: 13px;
    font-family: var(--font-family);
    transition: var(--transition);
}

.input-wrap input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 隐藏 number 输入框的上下调节按钮 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.input-wrap .unit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 11px;
    pointer-events: none;
}

.size-sep {
    color: var(--text-secondary);
    font-size: 14px;
}

/* 画布右键菜单 */
.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 130px;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 4px;
    font-size: 13px;
    color: var(--text-dark, #1f2937);
    user-select: none;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.context-menu-item:hover {
    background: var(--bg-surface, #FAFAFA);
}
.context-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}
.context-menu-sep {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 4px 6px;
}

.toolbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.toolbar-right {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
    user-select: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.btn-primary {
    background: var(--color-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--color-blue-dark);
    box-shadow: 0 2px 8px rgba(0, 82, 217, 0.3);
}

.btn-accent {
    background: var(--color-green);
    color: white;
}

.btn-accent:hover {
    background: #249063;
    box-shadow: 0 2px 8px rgba(43, 164, 113, 0.3);
}

.btn-export {
    background: var(--color-export);
    color: white;
}

.btn-export:hover {
    background: #C25A0E;
    box-shadow: 0 2px 8px rgba(227, 115, 24, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
}

.btn-outline.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
}

.btn-brand-light {
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
}

.btn-brand-light:hover {
    background: #DCE7FD;
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
    box-shadow: 0 2px 8px rgba(0, 82, 217, 0.15);
}

/* 本地打印助手在线时，点亮「配置」按钮及图标为绿色 */
.btn.assistant-online {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(43, 164, 113, 0.18);
}
.btn.assistant-online:hover {
    background: #249063;
    border-color: #249063;
    box-shadow: 0 2px 8px rgba(43, 164, 113, 0.35);
}

.btn-danger {
    background: var(--color-red);
    color: white;
}

.btn-danger:hover {
    background: #BB2E25;
}

.select-sm {
    height: 30px;
    padding: 0 24px 0 8px;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-family);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 14px;
}

.select-sm:focus {
    outline: none;
    border-color: var(--color-blue);
}

/* ========== Main Layout ========== */
#mainContainer {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========== Left Panel ========== */
#leftPanel {
    width: 240px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.panel-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.panel-title i {
    color: var(--color-blue);
    font-size: 12px;
    opacity: 0.8;
}

/* 添加元素：紧凑行式卡片，去模板化彩色方块，改为克制单色风格 */
.tool-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
}

.tool-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 9px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-family);
    color: var(--text-body);
    text-align: left;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tool-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

.tool-btn:hover {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-dark);
}

.tool-btn:hover::before {
    background: var(--color-blue);
}

.tool-btn:active {
    background: var(--border-light);
}

.tool-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tool-btn:hover .tool-btn-icon {
    background: #FFFFFF;
    border-color: var(--color-blue-light);
    color: var(--color-blue);
}

.tool-btn-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* Label List */
.label-list {
    max-height: calc(100vh - 340px);
    overflow-y: auto;
}

.label-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.label-list-empty i {
    font-size: 28px;
    opacity: 0.4;
}

/* 标签搜索框 */
.label-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
}

.label-search .fa-local {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 100% !important;
    padding: 0 6px 0 10px !important;
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
}

.label-search input {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0 10px 0 4px;
    border: none;
    background: transparent;
    color: var(--text-dark);
    font-size: 12px;
    font-family: var(--font-family);
    box-sizing: border-box;
}

.label-search input:focus {
    outline: none;
}

.label-search:focus-within {
    border-color: var(--color-blue);
}

.label-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.label-item:hover {
    border-color: var(--color-blue-light);
    background: var(--color-blue-light);
}

.label-item.active {
    border-color: var(--color-blue);
    background: #DBEAFE;
}

.label-item-info {
    flex: 1;
    min-width: 0;
}

.label-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-item-size {
    font-size: 11px;
    color: var(--text-body);
    margin-top: 2px;
}

.label-item-time {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.label-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: var(--transition);
}

.label-item:hover .label-item-actions {
    opacity: 1;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.btn-icon.delete:hover {
    background: #FEE2E2;
    color: var(--color-red);
}

.btn-icon.copy:hover {
    background: #DBEAFE;
    color: var(--color-blue);
}

.btn-icon.move:hover {
    background: #DBEAFE;
    color: var(--color-blue);
}

/* 同步到组织（个人标签迁移至组织共享库） */
.btn-icon.sync:hover {
    background: #DCFCE7;
    color: var(--color-green);
}

/* 缩放百分比显示（作为按钮内的标签） */
#zoomLabel {
    min-width: 42px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* 工具栏按钮禁用态 */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== Canvas Area ========== */
#canvasArea {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-canvas);
    overflow: hidden;
    position: relative;
}

/* ========== 标签页栏（Tabs Bar） ========== */
.tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 8px 0 8px;
    background: var(--bg-sidebar, #f3f4f6);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 38px;
}

.tabs-scroll {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: thin;
}

.tabs-scroll::-webkit-scrollbar {
    height: 4px;
}

.tabs-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.label-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    min-width: 90px;
    max-width: 200px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.label-tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-dark, #111827);
}

/* 拖拽排序：被拖起的标签页 */
.label-tab.dragging {
    opacity: 0.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* 拖拽排序：插入位置占位符 */
.label-tab-placeholder {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--color-blue, #3b82f6);
    border-style: dashed;
    cursor: grabbing;
}

/* 拖拽排序：跟随鼠标的“幽灵”标签，移动过程中清晰显示标签名称 */
.label-tab.label-tab-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #ffffff;
    border: 1px solid var(--color-blue, #3b82f6);
    border-bottom: 1px solid var(--color-blue, #3b82f6);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    color: var(--text-dark, #111827);
    font-weight: 600;
    opacity: 0.95;
    transform: translate(-50%, -104%);
    cursor: grabbing;
}

.label-tab.active {
    background: #fff;
    border-color: var(--border-color);
    color: var(--text-dark, #111827);
    font-weight: 600;
}

.label-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.label-tab-star {
    color: #f59e0b;
    font-size: 12px;
    line-height: 1;
}

.label-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
}

.label-tab-close {
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    line-height: 1;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.label-tab-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.tabs-new {
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.tabs-new:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-blue, #3b82f6);
}

.canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
}

.current-label-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.canvas-info {
    font-size: 11px;
    color: var(--text-body);
    background: var(--bg-surface);
    padding: 2px 10px;
    border-radius: 10px;
}

/* 组织库只读提示徽标（画布头部；组织内「可查看」成员打开组织标签时显示） */
.org-readonly-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-yellow, #F59E0B);
    background: rgba(245, 158, 11, 0.12);
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.org-readonly-badge i {
    font-size: 10px;
}

/* 只读态下被禁用的按钮（元素添加 / 保存 / 撤销恢复 / 新建标签） */
.btn.is-readonly,
.tool-btn.is-readonly,
.tabs-new.is-readonly {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(1);
}

.canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* 内部滚动层：承载画布与刻度尺，独立滚动；图层抽屉在它之外，不被滚动带动 */
/* 说明：不使用 flex 居中（align-items/justify-content: center），否则画布放大溢出时
   溢出部分（尤其顶部/左侧）无法滚动到。改用 .canvas-container 的 margin:auto 居中：
   空间充足时等价于居中，溢出时自动回退到左上角，滚动条可完整访问全部区域。 */
.canvas-scroll {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: auto;
    padding: 58px 40px 40px 58px;
}

/* 平移模式开启时的工具栏按钮高亮 */
#btnPanMode.active {
    background: var(--color-primary, var(--color-blue));
    border-color: var(--color-primary, var(--color-blue));
    color: #fff;
}

#btnPanMode.active .tool-btn-icon {
    background: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    color: #fff;
}

/* 平移模式下画布抓取光标 */
.canvas-wrapper.pan-active {
    cursor: grab;
}
.canvas-wrapper.pan-active:active {
    cursor: grabbing;
}

/* ========== 顶部操作提示抽屉 ========== */
.tips-wrapper {
    position: relative;
    display: inline-flex;
}

.tips-drawer {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl);
    padding: 12px 14px;
    z-index: 1000;
    /* 抽屉式动画：默认收起（位置上移 + 透明 + 不可交互） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    transform-origin: top right;
}

.tips-drawer.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tips-drawer::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.tips-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.tips-drawer-header i {
    color: var(--color-yellow, #F59E0B);
}

.tips-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tips-drawer li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tips-drawer li i {
    width: 16px;
    text-align: center;
    color: var(--color-primary, var(--color-blue));
    flex-shrink: 0;
}

.tips-drawer kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 2px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-primary, #333);
    background: var(--bg-elevated, #f0f0f0);
    border: 1px solid var(--border-color, #d0d0d0);
    border-bottom-width: 2px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ========== 直连打印弹窗：打印帮助（常驻提示卡片） ========== */
.print-help-static {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
}

.print-help-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.print-help-title i {
    color: var(--color-yellow, #F59E0B);
}

.print-help-static p {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.print-help-static p:last-child {
    margin-bottom: 0;
}

.print-help-static p b {
    color: var(--text-body);
    font-weight: 600;
}

/* ========== 成员/用户管理弹窗 ========== */
/* 双类提升特异性，覆盖后文 .modal 的 width:420px（原先单类 .modal-lg 规则被覆盖而未生效） */
.modal.modal-lg {
    width: 600px;
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
}

/* 图标库专用大弹窗（提高特异性以覆盖 .modal 的 width:420px） */
.modal.modal-xl {
    width: 1100px !important;
    max-width: 95vw !important;
    height: 88vh !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.icon-picker {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px;
    flex: 1;
    min-height: 0;
    padding: 16px 20px;
}

.icon-categories {
    width: 190px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    border-right: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.icon-cat {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.icon-cat:hover {
    background: var(--bg-surface, #FAFAFA);
    color: var(--text-body, #4B4B4B);
}

.icon-cat.active {
    background: var(--color-primary, var(--color-blue));
    color: #fff;
}

.icon-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.icon-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
}

.icon-search {
    flex: 1;
    min-width: 0;
}

.icon-count {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 虚拟滚动视口 */
.icon-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-canvas, #fafafa);
}

.icon-spacer {
    position: relative;
    width: 100%;
}

.icon-items {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
}

/* 分类列表竖向滚动细滚动条 */
.icon-categories::-webkit-scrollbar,
.icon-viewport::-webkit-scrollbar {
    width: 8px;
}
.icon-categories::-webkit-scrollbar-thumb,
.icon-viewport::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 4px;
}
.icon-categories::-webkit-scrollbar-track,
.icon-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, #fff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.icon-item:hover {
    border-color: var(--color-primary, var(--color-blue));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
    z-index: 2;
}

.icon-item-svg {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-item-svg svg {
    width: 100%;
    height: 100%;
}

.icon-item-svg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-item-label {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 右侧预览 */
.icon-preview {
    width: 220px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color, #e5e7eb);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body, #4B4B4B);
}

.preview-img {
    height: 140px;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-canvas, #fafafa);
}

.preview-img img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.preview-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.preview-name {
    font-size: 13px;
    color: var(--text-body, #4B4B4B);
    word-break: break-all;
}

.preview-tip {
    margin-top: auto;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.5;
}

.icon-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.icon-attribution {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.icon-attribution a {
    color: var(--color-primary, var(--color-blue));
    text-decoration: none;
}

.canvas-container {
    box-shadow: var(--shadow-xl);
    border-radius: 2px;
    position: relative;
    margin: auto; /* 配合 .canvas-scroll 实现居中，同时避免溢出时滚动条无法访问被裁剪区域 */
}

.canvas-container canvas {
    display: block;
}

/* ========== 画布刻度尺（mm） ========== */
.canvas-ruler {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.ruler-horizontal {
    width: 100%;
    height: 18px;
}
.ruler-vertical {
    width: 18px;
    height: 100%;
}
.ruler-canvas {
    display: block;
}

/* ========== Right Panel ========== */
#rightPanel {
    width: 240px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.properties-content {
    min-height: 120px;
}

.properties-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.properties-empty i {
    font-size: 24px;
    opacity: 0.4;
}

.prop-group {
    margin-bottom: 14px;
}

.prop-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.prop-group textarea,
.prop-group input[type="text"],
.prop-group input[type="number"],
.prop-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark);
    background: white;
    transition: var(--transition);
}

.prop-group textarea:focus,
.prop-group input:focus,
.prop-group select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.prop-group textarea {
    resize: vertical;
    min-height: 60px;
}

.prop-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.prop-color-preset {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.prop-color-preset:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
}

.prop-color-preset.selected {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--text-dark);
}

.prop-color-input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
}

.prop-alpha-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.prop-alpha-row input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--primary-color, #4f8cff);
    cursor: pointer;
}

.prop-alpha-val {
    font-size: 12px;
    color: var(--text-muted, #888);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.prop-style-buttons {
    display: flex;
    gap: 4px;
}

.prop-style-btn {
    width: 34px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-body);
    transition: var(--transition);
}

.prop-style-btn:hover {
    background: var(--bg-surface);
}

.prop-style-btn.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
}

.prop-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.prop-row .prop-group {
    flex: 1;
    margin-bottom: 0;
}

/* ===== 画布（标签）属性面板 ===== */
.prop-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(59, 130, 246, 0.04));
    border-left: 3px solid var(--color-blue);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blue-dark, #1D4ED8);
}

.prop-section-label i {
    font-size: 12px;
}

.prop-divider {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0 14px;
}

/* 属性面板：带复选框的标签行 */
.prop-group label.prop-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-dark);
    cursor: pointer;
    margin-bottom: 8px;
}

.prop-group label.prop-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

/* 常用尺寸预设 */
.prop-size-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.prop-size-preset {
    padding: 7px 4px;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-body);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.prop-size-preset:hover {
    background: var(--bg-surface);
    border-color: #CBD5E1;
    color: var(--text-dark);
}

.prop-size-preset.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
    font-weight: 600;
}

/* 对齐 / 分布工具按钮 */
.prop-align-btn {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-body);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.prop-align-btn:hover:not(:disabled) {
    border-color: #CBD5E1;
    background: var(--bg-surface);
    color: var(--text-dark);
}
.prop-align-btn.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
}
.prop-align-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.prop-align-btn i {
    font-size: 12px;
}

/* 画布信息统计 */
.prop-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.prop-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.prop-meta-item span {
    color: var(--text-secondary);
}

.prop-meta-item strong {
    color: var(--text-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 底部操作提示 */
.properties-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
}

.properties-hint i {
    opacity: 0.5;
}

/* ===== 打印审计卡片（标签画布属性区） ===== */
.prop-audit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-surface, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-sm, 6px);
}

.prop-audit-nums {
    display: flex;
    gap: 10px;
}

.prop-audit-num {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: #fff;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #E5E7EB);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.prop-audit-num:hover {
    border-color: var(--color-blue, #0052D9);
    box-shadow: 0 1px 6px rgba(0, 82, 217, 0.10);
}

.prop-audit-num span {
    font-size: 11px;
    color: var(--text-secondary, #646A73);
}

.prop-audit-num strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-blue-dark, #0052D9);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.prop-audit-last,
.prop-audit-empty,
.prop-audit-loading {
    font-size: 11px;
    color: var(--text-secondary, #646A73);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prop-audit-empty,
.prop-audit-loading {
    text-align: center;
    padding: 4px 0;
}

/* 「标签信息」区块内的空态提示：文案较长，放开换行避免被上一层 nowrap 截断成省略号 */
.prop-meta .prop-audit-empty {
    white-space: normal;
    overflow: visible;
    line-height: 1.5;
}

.prop-audit-btn {
    align-self: flex-start;
    height: 26px;
    border-color: var(--color-blue, #0052D9);
    color: var(--color-blue, #0052D9);
    font-size: 12px;
}

/* ===== 打印记录与统计弹窗 ===== */
.pl-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pl-seg-group {
    display: inline-flex;
    padding: 2px;
    background: var(--bg-surface, #F5F7FA);
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #E5E7EB);
}

.pl-seg {
    height: 26px;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-body, #4B4B4B);
    cursor: pointer;
    transition: all 0.14s ease;
}

.pl-seg:hover:not([disabled]) { color: var(--color-blue, #0052D9); }

.pl-seg.active {
    background: #fff;
    color: var(--color-blue, #0052D9);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.pl-seg[disabled] { opacity: 0.45; cursor: not-allowed; }

.pl-filter-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pl-days {
    height: 28px;
    min-width: 92px;
    font-size: 12px;
}

.pl-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.pl-card {
    padding: 10px 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-surface, #F9FAFB) 100%);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    text-align: center;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pl-card:hover {
    transform: translateY(-1px);
    border-color: var(--color-blue, #0052D9);
    box-shadow: 0 4px 12px rgba(0, 82, 217, 0.10);
}

.pl-card-val {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-blue-dark, #0052D9);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.pl-card-val em {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary, #646A73);
    margin-left: 2px;
}

.pl-card-label {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary, #646A73);
}

.pl-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.pl-group {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
}

.pl-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark, #1F2329);
    margin-bottom: 8px;
}

.pl-group-empty {
    font-size: 11px;
    color: var(--text-placeholder, #8F959E);
}

.pl-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}

.pl-bar-row:last-child { margin-bottom: 0; }

.pl-bar-name {
    width: 84px;
    flex-shrink: 0;
    color: var(--text-body, #4B4B4B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-surface, #F5F7FA);
    border-radius: 999px;
    overflow: hidden;
}

.pl-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-blue, #0052D9), #366EF4);
    animation: plBarIn 0.35s ease;
}

@keyframes plBarIn { from { width: 0 !important; } }

.pl-bar-val {
    width: 76px;
    flex-shrink: 0;
    text-align: right;
    color: var(--text-secondary, #646A73);
    font-variant-numeric: tabular-nums;
}

.pl-table-wrap { min-height: 120px; }

.pl-tbl-wrap { max-height: 42vh; }

.pl-td-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-td-num { font-variant-numeric: tabular-nums; font-weight: 600; }

.pl-loading,
.pl-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    font-size: 12px;
    color: var(--text-secondary, #646A73);
}

.pl-retention {
    display: inline-flex;
    align-items: center;
    margin-right: auto;   /* 提示居左，按钮保持右侧（modal-footer 为 flex-end） */
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary, #646A73);
}

.pl-retention i { opacity: 0.6; }

/* Tips */
.tips-content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tips-content li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-body);
}

.tips-content li i {
    width: 16px;
    color: var(--color-blue);
    font-size: 11px;
    text-align: center;
}

/* ========== Modal ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 注意：不启用 backdrop-filter（毛玻璃）与入场动画，
       避免低性能机器上弹窗出现/关闭时的渲染卡顿 */
}
/* 次级弹窗：在管理弹窗(adminModal)内打开（如组织重命名），需浮于其它 modal 之上 */
#orgRenameModal { z-index: 3200; }
/* 组织订阅系列弹窗：由管理弹窗 / 用户下拉唤起，显式高于 modal-overlay(1000)，不依赖 DOM 顺序 */
#orgPlanModal,
#orgPlanEditModal,
#orgPlanDetailModal,
#myPlanModal,
#userQuotaModal { z-index: 2100; }
/* 通用确认弹窗：可能在任意弹窗之上做二次确认（如组织卡片「快捷续费」），
   必须高于管理弹窗(1000)、用户下拉(3000)、设置抽屉(4000)，否则会被唤起它的弹窗盖住 */
#confirmModal { z-index: 5000; }

.modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 420px;
    max-width: 90vw;
    max-height: calc(100vh - 48px); /* 与页面上下保持 24px 边距 */
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header h3 i {
    color: var(--color-blue);
}

.modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 18px;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    background: #FEE2E2;
    color: var(--color-red);
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto; /* 内容溢出时滚动，标题/底部按钮保持固定 */
}

.confirm-message {
    margin: 0;
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* 弹窗按钮：覆盖为适配浅色背景的样式 */
.modal-footer .btn {
    height: 38px;
    min-width: 92px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
}

/* 取消按钮 —— 浅色描边风格 */
.modal-footer .btn-outline {
    background: white;
    border: 1px solid var(--border-color);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
}

.modal-footer .btn-outline:hover {
    background: var(--bg-surface);
    border-color: #CBD5E1;
    color: var(--text-dark);
}

/* 确认按钮 —— 主色实心 */
.modal-footer .btn-primary {
    background: var(--color-blue);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 82, 217, 0.25);
}

.modal-footer .btn-primary:hover {
    background: var(--color-blue-dark);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32);
    transform: translateY(-1px);
}

.modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 6px;
}

/* 条形码编码规范示例 */
.barcode-spec {
    margin-top: 4px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-body);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.barcode-spec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 8px;
}
.barcode-spec-title i {
    font-size: 13px;
}
.spec-row {
    display: flex;
    gap: 8px;
    line-height: 1.8;
}
.spec-k {
    flex: 0 0 48px;
    color: var(--text-secondary);
}
.spec-v {
    flex: 1;
    color: var(--text-body);
    word-break: break-all;
}
.spec-v code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    padding: 1px 5px;
    color: var(--color-blue-dark);
    background: var(--color-blue-light);
    border-radius: var(--radius-sm);
}
.spec-note {
    margin-top: 6px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-dark);
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 表单错误提示（如标签名称重复） */
.form-tip-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-red, #ef4444);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 表单信息提示（保存弹窗范围锁定说明等） */
.form-tip-info {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary, #5F6572);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ========== 保存弹窗「保存到」范围选择（个人库 / 组织共享库） ========== */
.save-scope-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.save-scope-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid var(--border-color, #DCDEE3);
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    color: var(--text-secondary, #5F6572);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    overflow: hidden;
}

.save-scope-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.save-scope-opt i { font-size: 12px; flex-shrink: 0; }
.save-scope-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.save-scope-opt:hover { border-color: var(--color-blue, #0052D9); }
.save-scope-opt:focus-within { outline: none; }

.save-scope-opt.is-selected {
    border-color: var(--color-blue, #0052D9);
    background: rgba(0, 82, 217, 0.06);
    color: var(--color-blue, #0052D9);
    font-weight: 600;
}

.save-scope-opt.is-disabled { cursor: not-allowed; opacity: 0.6; }
.save-scope-opt.is-disabled:hover { border-color: var(--border-color, #DCDEE3); }
.save-scope-opt.is-selected.is-disabled:hover { border-color: var(--color-blue, #0052D9); }

/* ========== Toast ========== */
.toast {
    position: fixed;
    top: 70px;
    right: 24px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-size: 13px;
    font-weight: 500;
    z-index: 6000; /* 高于确认弹窗(5000)与设置抽屉(4000)：弹窗内的操作提示也要可见 */
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background: var(--color-green);
}

.toast.error {
    background: var(--color-red);
}

.toast.info {
    background: var(--color-blue);
}

/* ========== Animations ========== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ========== AI 生成标注 ========== */
#aiBadge {
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-panel);
    border: 0px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    user-select: none;
    pointer-events: none;
}
#aiBadge i {
    color: var(--color-purple);
    font-size: 11px;
}

/* ========== Print Styles ========== */
@media print {
    body {
        background: white !important;
    }

    #toolbar,
    #leftPanel,
    #rightPanel,
    .tabs-bar,
    .canvas-header,
    .modal-overlay,
    .toast,
    #aiBadge,
    .layer-drawer,
    .canvas-zoom-bar,
    .canvas-undo-bar {
        display: none !important;
    }

    .barcode-spec {
        display: none !important;
    }

    #mainContainer {
        display: block !important;
    }

    #canvasArea {
        background: white !important;
    }

    .canvas-wrapper {
        padding: 0 !important;
        overflow: visible !important;
    }

    .canvas-container {
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* 工具卡片按钮状态（对齐按钮沿用 tool-btn 卡片样式） */
.tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.tool-btn.active {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.tool-btn.active .tool-btn-icon {
    background: #FFFFFF;
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* ============================================================
   标签库抽屉 - 工具栏「标签库」入口，左侧滑出
   ============================================================ */
.label-library-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
    z-index: 890;
}

.label-library-overlay.show {
    opacity: 1;
    visibility: visible;
}

.label-library-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 680px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    z-index: 900;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0.24s ease;
}

.label-library-drawer.show {
    transform: translateX(0);
    visibility: visible;
}

.label-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.label-library-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.label-library-title > i {
    color: var(--color-blue);
}

.label-library-count {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    border-radius: 10px;
    background: var(--color-blue-light);
    color: var(--color-blue);
}

/* 标签库容量徽标：当前范围（个人 / 组织）的标签剩余容量，状态色随用量变化 */
.label-library-quota {
    max-width: 168px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}

/* 容量不限 */
.label-library-quota.is-unlimited {
    background: var(--color-blue-light);
    color: var(--color-blue);
}

/* 接近上限（剩余 ≤ 20%） */
.label-library-quota.is-warn {
    background: #FFF3E6;
    color: var(--color-yellow);
}

/* 已满 / 超额 */
.label-library-quota.is-full {
    background: #FDE9E9;
    color: var(--color-red);
}

.label-library-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.label-library-close:hover {
    background: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* ============================================================
   标签库抽屉（双栏） - 分组树 + 标签列表
   ============================================================ */
/* 抽屉主体：header 固定 + body 双栏填满 */
.label-library-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* ---------- 左侧分组栏 ---------- */
.group-sidebar {
    flex: 0 0 216px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
}

.group-tree {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px 8px 4px;
}

/* 分组列表滚动区：仅此区域出现滚动条，静态入口（全部/未分组/回收站）与底部新建分组按钮固定 */
#groupTreeList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.group-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-body);
    font-size: 12.5px;
    user-select: none;
    transition: background 0.15s ease;
}

.group-node:hover {
    background: var(--color-blue-light);
}

.group-node.active {
    background: var(--color-blue-light);
    color: var(--color-blue);
    font-weight: 600;
}

.group-node.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--color-blue);
}

.group-node-icon,
.group-node .group-toggle {
    flex: 0 0 auto;
    width: 15px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.group-node.active .group-node-icon,
.group-node.active .group-toggle {
    color: var(--color-blue);
}

.group-node-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-node-count {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 5px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: 8px;
}

.group-node.active .group-node-count {
    background: #fff;
    color: var(--color-blue);
}

.group-tree-divider {
    height: 1px;
    margin: 8px 2px 6px;
    background: var(--border-light);
}

.group-tree-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 6px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.group-tree-empty i {
    font-size: 22px;
    opacity: 0.45;
}

/* 折叠箭头（仅父分组显示） */
.group-node .group-toggle {
    width: 13px;
    font-size: 9px;
    display: none;
    transition: transform 0.15s ease;
}

.group-node.has-children .group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-node.collapsed .group-toggle {
    transform: rotate(-90deg);
}

/* 无子分组的顶级分组：以等宽占位对齐有子分组节点的折叠箭头 */
.group-node .group-toggle-spacer {
    flex: 0 0 auto;
    width: 13px;
}

/* 分组行 hover 操作按钮 */
.group-node-actions {
    display: none;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.group-node:hover .group-node-actions {
    display: flex;
}

.group-node-actions .group-act {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.15s ease;
}

.group-node-actions .group-act:hover {
    background: #fff;
    color: var(--color-blue);
}

.group-node-actions .group-act.danger:hover {
    background: #FDECEB;
    color: #D54941;
}

/* 子分组缩进（图标与名称整体内缩，与顶级分组形成两级层次） */
.group-node.sub-group {
    padding-left: 40px;
}

/* 拖拽放置目标高亮 */
.group-node.drop-target {
    background: var(--color-blue-light);
    outline: 1px dashed var(--color-blue);
    outline-offset: -1px;
}

/* 新建分组按钮（侧栏底部固定） */
.group-add-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    margin: 6px 8px 10px;
    font-size: 12px;
}

/* ---------- 右侧标签列表主区 ---------- */
.label-library-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
    background: var(--bg-panel);
}

.label-library-drawer .label-search {
    flex-shrink: 0;
    margin: 0 0 10px;
}

.label-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.label-view-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标题 + 范围徽标成组（徽标紧跟标题，count 靠右） */
.label-view-title-group {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-library-drawer .label-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding: 0;
}

/* 批量工具条 */
.batch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    background: var(--color-blue-light);
    border: 1px solid #CDDFFB;
    border-radius: var(--radius-sm);
    animation: batchBarIn 0.18s ease;
}

@keyframes batchBarIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

.batch-selected {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blue);
}

.batch-bar .btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
}

.btn-danger-outline {
    background: #fff;
    border: 1px solid #F0A49E;
    color: #D54941;
}

.btn-danger-outline:hover {
    background: #FDECEB;
    border-color: #D54941;
    color: #D54941;
}

/* 标签列表项：勾选框 / 选中 / 拖拽状态 */
.label-item {
    position: relative;
}

.label-item-check {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 2px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.label-item:hover .label-item-check,
.label-item.checked .label-item-check {
    display: flex;
}

.label-item-check:hover {
    color: var(--color-blue);
}

.label-item.selected {
    border-color: var(--color-blue);
    background: #DBEAFE;
}

.label-item.dragging {
    opacity: 0.45;
}

/* 标签列表中显示所属分组的层级徽标（父分组 › 子分组） */
.label-item-group-badges {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.label-item-group-badge {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 6px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    color: var(--color-blue);
    background: var(--color-blue-light);
    border-radius: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}
.label-item-group-badge.is-parent {
    color: var(--text-secondary);
    background: #ECEFF3;
    max-width: 90px;
}
.label-item-group-sep {
    flex: 0 0 auto;
    margin: 0 3px;
    color: #C2C7CF;
    font-size: 10px;
    line-height: 14px;
}

/* 移动弹窗提示 */
.move-modal-hint {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
}

/* ---------- 回收站 ---------- */
/* 回收站工具条（暖色提示，区别于蓝色批量条） */
.trash-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    background: #FFF7E6;
    border: 1px solid #FFE1A8;
    border-radius: var(--radius-sm);
    animation: batchBarIn 0.18s ease;
}

.trash-hint {
    flex: 1;
    font-size: 11px;
    color: #B25E09;
    line-height: 1.5;
}

.trash-bar .btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
}

/* 回收站树节点：垃圾桶图标强调色 */
.group-node[data-view="trash"] .group-node-icon {
    color: #B25E09;
}

.group-node[data-view="trash"].active .group-node-icon {
    color: var(--color-blue);
}

/* 回收站列表条目（弱化名称、强调删除时间） */
.label-item.trash-item .label-item-name {
    color: var(--text-body);
}

.label-item.trash-item .label-item-size {
    color: var(--text-secondary);
}

.label-item.trash-item .label-item-time {
    color: #B25E09;
}

/* 恢复按钮 */
.btn-icon.restore:hover {
    background: #DBEAFE;
    color: var(--color-blue);
}

/* ============================================================
   画布缩放 / 平移控制条 - 画布正下方（浮动居中）
   ============================================================ */
.canvas-zoom-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-panel, #FFFFFF);
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 56; /* 高于画布内容(50)，低于图层抽屉(60) */
    user-select: none;
}

.canvas-zoom-bar .btn {
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
}

/* ============================================================
   撤销 / 恢复控制条 - 画布正上方（浮动居中，与底部缩放条对称）
   ============================================================ */
.canvas-undo-bar {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--bg-panel, #FFFFFF);
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 56; /* 高于画布内容(50)，低于图层抽屉(60) */
    user-select: none;
}

.canvas-undo-bar .btn {
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
}

/* ============================================================
   对齐 / 分布浮动层 - 悬停「功能区 > 对齐」入口时弹出
   ============================================================ */
.align-popover {
    position: fixed;
    width: 244px;
    padding: 6px;
    background: var(--bg-panel, #FFFFFF);
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.align-popover.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 网格大小浮动层：悬停「功能区 > 网格」入口时弹出 */
.grid-popover {
    width: 168px;
    padding: 10px 10px 12px;
}

.grid-popover-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.grid-popover-title::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--color-blue, #3b82f6);
}

.grid-size-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.grid-size-btn {
    height: 30px;
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-sm);
    background: var(--bg-panel, #FFFFFF);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.grid-size-btn:hover {
    border-color: var(--color-blue, #3b82f6);
    color: var(--color-blue, #3b82f6);
}

.grid-size-btn.active {
    border-color: var(--color-blue, #3b82f6);
    background: color-mix(in srgb, var(--color-blue, #3b82f6) 10%, #FFFFFF);
    color: var(--color-blue, #3b82f6);
    font-weight: 600;
}

/* 形状浮层：悬停「添加元素 > 形状」入口时弹出 */
.shape-popover {
    width: 300px;
    padding: 10px 12px 12px;
}

.shape-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.shape-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    padding: 4px 2px;
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-sm);
    background: var(--bg-panel, #FFFFFF);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shape-item i {
    font-size: 18px;
}

.shape-item span {
    white-space: nowrap;
}

.shape-item:hover {
    border-color: var(--color-blue, #3b82f6);
    color: var(--color-blue, #3b82f6);
}

.shape-item:active {
    transform: scale(0.96);
}

/* ============================================================
   元素图层列表 - 画布区右上角抽屉
   ============================================================ */
.layer-drawer {
    position: absolute;
    top: 18px;
    right: 0px;
    width: 180px;
    max-height: calc(100% - 34px);
    display: flex;
    flex-direction: column;
    background: var(--bg-panel, #FFFFFF);
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    overflow: hidden;
    transition: max-height .22s ease;
}

.layer-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-panel, #FFFFFF);
    border-bottom: 1px solid var(--border-light, #EEEEEE);
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}

.layer-drawer-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #999999);
    letter-spacing: 0.3px;
}

.layer-drawer-title > i {
    color: var(--color-blue, #0052D9);
    font-size: 12px;
    opacity: 0.8;
}

.layer-drawer-title .panel-title-hint {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary, #999999);
}

.layer-drawer-toggle {
    font-size: 11px;
    color: var(--text-secondary, #999999);
    transition: transform .22s ease;
}

.layer-drawer.collapsed {
    max-height: 41px;
}

.layer-drawer.collapsed .layer-drawer-toggle {
    transform: rotate(180deg);
}

.layer-drawer.collapsed .layer-list {
    display: none;
}

.layer-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 8px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-secondary, #999999);
    font-size: 13px;
}

.layer-empty i {
    font-size: 22px;
    opacity: 0.6;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.layer-item:hover {
    background: var(--bg-surface, #FAFAFA);
    border-color: var(--border-color, #DCDCDC);
}

.layer-item.active {
    background: var(--color-blue-light, #ECF2FE);
    border-color: var(--color-blue, #0052D9);
}

.layer-item.hidden {
    opacity: 0.5;
}

.layer-item.locked .layer-name {
    font-style: italic;
}

.layer-type-icon {
    width: 18px;
    text-align: center;
    color: var(--text-secondary, #999999);
    flex-shrink: 0;
}

.layer-item.active .layer-type-icon {
    color: var(--color-blue, #0052D9);
}

.layer-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-body, #4B4B4B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.layer-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary, #999999);
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.layer-btn:hover {
    background: var(--bg-secondary, #E7E7E7);
    color: var(--text-body, #4B4B4B);
}

.layer-item.active .layer-btn:hover {
    background: rgba(0, 82, 217, 0.12);
}

/* ============================================================
   直连打印机弹窗
   ============================================================ */
.printer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    background: var(--bg-surface, #FAFAFA);
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-body, #4B4B4B);
}

.printer-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-secondary, #999999);
    flex-shrink: 0;
}

.printer-status-dot.ok {
    background: var(--color-green, #2BA471);
    box-shadow: 0 0 0 3px rgba(43, 164, 113, 0.18);
}

.printer-info {
    padding: 8px 12px;
    margin-bottom: 14px;
    background: var(--color-blue-light, #ECF2FE);
    border: 1px solid rgba(0, 82, 217, 0.15);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--color-blue-dark, #003CAB);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row .form-group {
    margin-bottom: 14px;
}

.printer-actions-btns {
    display: flex;
    gap: 8px;
}

.printer-actions-btns .btn {
    flex: 1;
    height: 34px;
    font-size: 12px;
    padding: 0 10px;
}

.printer-range {
    width: 100%;
    accent-color: var(--color-blue, #0052D9);
    height: 22px;
}

.printer-hint {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary, #999999);
}

.printer-hint b {
    color: var(--color-blue, #0052D9);
}

.printer-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #333333);
    cursor: pointer;
    user-select: none;
}

.printer-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-blue, #0052D9);
    cursor: pointer;
}

.printer-check em {
    font-style: normal;
    font-size: 12px;
    color: var(--text-secondary, #999999);
}

/* ========== 账号体系：顶栏用户区 ========== */
.user-area {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--bg-tertiary, #E8E8E8);
}

/* ========== 游客模式 ========== */
/* 顶栏游客用户区：游客徽标 + 登录入口 */
.guest-area {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--bg-tertiary, #E8E8E8);
}

.guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-orange-dark, #B45309);
    background: var(--color-orange-light, #FEF3C7);
    border: 1px solid var(--color-orange, #F59E0B);
    cursor: default;
    user-select: none;
}

/* 游客态功能收敛：
   - 隐藏标签库左侧分组栏（分组/范围切换/回收站入口/新建分组）
   - 隐藏标签项勾选框与「移动到分组」按钮（无分组能力，杜绝批量工具条出现）
   - 隐藏保存弹窗「所属分组」下拉
   - 隐藏左侧「添加图标」入口（游客不可新增图标，已有图标元素保留可编辑） */
body.guest-mode .group-sidebar { display: none; }
body.guest-mode .label-item-check { display: none; }
body.guest-mode .label-item-actions .move { display: none; }
body.guest-mode #saveLabelGroupFormGroup { display: none; }
body.guest-mode #btnAddIcon { display: none; }

/* 游客态标签库抽屉提示：数据仅存本机 */
.guest-local-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: 11.5px;
    color: var(--color-orange-dark, #B45309);
    background: var(--color-orange-light, #FEF3C7);
    border: 1px solid var(--color-orange, #F59E0B);
}

body.guest-mode .guest-local-hint { display: flex; }

.user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-trigger:hover { background: var(--bg-surface, #F5F5F5); }
.user-area.open .user-trigger { background: var(--bg-surface, #F5F5F5); }

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0052D9 0%, #3D7BF5 60%, #6FA3FF 100%);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 82, 217, 0.25);
    user-select: none;
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: left;
}

.user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.user-org {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-secondary, #999);
    line-height: 1.5;
}

.user-org.tag-org {
    display: inline-block;
    padding: 0 6px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--color-blue-light, #ECF2FE);
    color: var(--color-blue-dark, #003CAB);
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 236px;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.12));
    padding: 6px;
    z-index: 3000;
    animation: userDdIn 0.16s ease;
    transform-origin: top right;
}

/* 下拉菜单右上角指示三角：指向右上角头像入口（双层三角形成 1px 描边） */
.user-dropdown::before,
.user-dropdown::after {
    content: '';
    position: absolute;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}

.user-dropdown::before {
    top: -8px;
    border-bottom: 6px solid var(--border-color, #E5E7EB);
}

.user-dropdown::after {
    top: -6px;
    border-bottom: 6px solid #fff;
}

@keyframes userDdIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.user-dd-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 10px;
    border-bottom: 1px dashed var(--border-color, #E5E7EB);
    margin-bottom: 4px;
}

.user-dd-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* 套餐图标：颜色随订阅状态，点击查看「我的套餐」 */
.user-dd-plan {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.user-dd-plan > i,
.user-dd-plan > svg {
    width: 12px;
    height: 12px;
    font-size: 12px;
    fill: currentColor;
}
.user-dd-plan:hover { transform: scale(1.12); }
.user-dd-plan:active { transform: scale(1); }
.user-dd-plan.is-ok       { color: #0052D9; background: #ECF2FE; border-color: #BBD3FB; }
.user-dd-plan.is-warn     { color: #A2500A; background: #FEF3E6; border-color: #F5C98C; }
.user-dd-plan.is-danger   { color: #A62124; background: #FDECEC; border-color: #F5B3B3; }
.user-dd-plan.is-muted    { color: #8F959E; background: #F1F2F4; border-color: #E7E9EB; }

.user-dd-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dd-org { font-size: 11px; color: var(--text-secondary, #999); }

.user-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-body, #4B4B4B);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.user-dd-item:hover { background: var(--color-blue-light, #ECF2FE); color: var(--color-blue, #0052D9); }
.user-dd-item i { width: 15px; text-align: center; flex-shrink: 0; color: inherit; }
.user-dd-item.user-dd-danger { color: var(--color-red, #D54941); }
.user-dd-item.user-dd-danger:hover { background: #FDE9E9; color: #C0392B; }
.user-dd-sep { height: 1px; background: #EDEFF3; margin: 5px 4px; }

/* ========== 标签库范围切换 ========== */
.scope-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 0 0 6px;
    background: #EDEFF3;
    border-radius: 8px;
}

.scope-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    min-width: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    color: var(--text-secondary, #5F6572);
    cursor: pointer;
    transition: all 0.15s ease;
}

.scope-btn i { font-size: 11px; flex-shrink: 0; }
.scope-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-btn.active {
    background: #fff;
    color: var(--color-blue, #0052D9);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.scope-btn:not(.active):hover { color: var(--text-dark, #000); }
.scope-org-name { max-width: 88px; }

/* 标签列表标题上的范围徽标 */
.label-view-scope {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 16px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--color-blue-dark, #003CAB);
    background: var(--color-blue-light, #ECF2FE);
    border: 1px solid rgba(0, 82, 217, 0.14);
}
.label-view-scope.scope-me {
    color: #5F6572;
    background: #EFF1F4;
    border-color: #E2E5EA;
}

/* ========== 账户弹窗通用 ========== */
.modal-hint {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary, #4B4B4B);
    background: var(--bg-surface, #FAFAFA);
    border: 1px dashed var(--border-color, #DCDCDC);
    border-radius: var(--radius-sm, 6px);
    word-break: break-all;
}

.pw-meter {
    height: 4px;
    border-radius: 2px;
    background: #E9ECF1;
    margin-top: 6px;
    overflow: hidden;
}
.pw-meter-bar { height: 100%; width: 0; border-radius: 2px; transition: width 0.2s ease, background 0.2s ease; }
.pw-meter-bar.pw-weak   { background: var(--color-red, #D54941); }
.pw-meter-bar.pw-mid    { background: #E37318; }
.pw-meter-bar.pw-strong { background: var(--color-green, #2BA471); }

.form-tip-ok {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-green, #2BA471);
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

/* ========== 用户 / 组织管理弹窗 ========== */
.admin-body { padding: 0; display: flex; flex-direction: column; min-height: 0; }

.admin-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    flex-shrink: 0;
}

.admin-tab {
    position: relative;
    padding: 11px 14px;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--text-secondary, #5F6572);
    cursor: pointer;
    transition: color 0.15s ease;
}
.admin-tab:hover { color: var(--text-dark, #000); }
.admin-tab.active { color: var(--color-blue, #0052D9); font-weight: 600; }
.admin-tab.active::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-blue, #0052D9);
}

.admin-panel { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; flex: 1; overflow: hidden; }

.admin-toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.admin-toolbar .form-input { height: 32px; }
.admin-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--border-color, #D6D9E0);
    border-radius: var(--radius-sm, 6px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 图标与输入框位于同一 flex 水平线，图标常驻框内；聚焦时整个框高亮 */
.admin-search:focus-within {
    border-color: var(--color-blue, #0052D9);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.admin-search i {
    font-size: 13px;
    color: #98A2B3;
    line-height: 1;
    flex-shrink: 0;
    pointer-events: none;
}
.admin-search .form-input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.admin-search .form-input:focus {
    border-color: transparent;
    box-shadow: none;
}
.admin-org-filter { min-width: 150px; height: 32px; }

.admin-tbl-wrap {
    flex: 1;
    min-height: 200px;
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    background: #fff;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    background: #F7F8FA;
    color: var(--text-secondary, #5F6572);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}
.admin-table td { padding: 8px 12px; border-bottom: 1px solid #F0F1F3; vertical-align: middle; }
.admin-table tbody tr { transition: background 0.1s ease; }
.admin-table tbody tr:hover { background: #FAFCFF; }
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-user-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-user-name { font-weight: 600; color: var(--text-dark, #000); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-username { font-size: 11px; color: var(--text-secondary, #999); }

.a-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.a-pill.ok    { background: #E6F5EE; color: #1E7A54; }
.a-pill.off   { background: #FDE9E9; color: #C0392B; }
.a-pill.warn  { background: #FFF1E0; color: #B25E09; }
.a-pill.info  { background: var(--color-blue-light, #ECF2FE); color: var(--color-blue-dark, #003CAB); }
.a-pill.muted { background: #F1F3F5; color: #5F6672; }

.a-acts { display: flex; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.a-btn {
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-color, #DCDCDC);
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
    color: var(--text-body, #4B4B4B);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.a-btn:hover { border-color: var(--color-blue, #0052D9); color: var(--color-blue, #0052D9); background: var(--color-blue-light, #ECF2FE); }
.a-btn.danger:hover { border-color: var(--color-red, #D54941); color: #C0392B; background: #FDE9E9; }
/* 主行动（订单台「核销 / 去生效」）：主色描边 + 浅底，与页面主按钮视觉一致但不抢主按钮权重 */
.a-btn.primary {
    border-color: var(--color-blue, #0052D9);
    background: var(--color-blue-light, #ECF2FE);
    color: var(--color-blue-dark, #003CAB);
    font-weight: 500;
}
.a-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* 行操作收纳：[···] 按钮 + 浮层菜单（用户/组织管理成员表） */
.a-more { display: inline-flex; }
.a-more-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0 6px; line-height: 1; font-size: 14px; color: var(--text-secondary, #5F6572); }
.a-more-btn i { pointer-events: none; }
.a-more-btn:hover { border-color: var(--color-blue, #0052D9); color: var(--color-blue, #0052D9); background: var(--color-blue-light, #ECF2FE); }
.a-more-store { display: none; }
.a-row-menu {
    position: fixed;
    z-index: 3100; /* 高于 modal-overlay(1000)，低于用户下拉(3000) 之上的设置抽屉 */
    min-width: 148px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.14));
    animation: rowMenuIn 0.14s ease;
    transform-origin: top right;
}
@keyframes rowMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.a-more-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    background: none;
    font-size: 12px;
    text-align: left;
    color: var(--text-body, #4B4B4B);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.a-more-item:hover { background: #F2F5FA; color: var(--color-blue, #0052D9); }
.a-more-item.danger { color: #C0392B; }
.a-more-item.danger:hover { background: #FDE9E9; color: #C0392B; }

.a-empty { padding: 44px 0; text-align: center; color: var(--text-secondary, #999); font-size: 13px; }
.a-empty i { display: block; font-size: 26px; margin-bottom: 10px; color: #C9CED6; }

/* 组织卡片（超管组织页） */
.admin-orgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-org-card {
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: 12px 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.admin-org-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); border-color: rgba(0, 82, 217, 0.25); }
.admin-org-head { display: flex; align-items: center; gap: 8px; }
.admin-org-head i { color: var(--color-blue, #0052D9); font-size: 15px; flex-shrink: 0; }
.admin-org-name { flex: 1; font-weight: 600; color: var(--text-dark, #000); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-org-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.admin-org-sub span { font-size: 11px; color: var(--text-secondary, #666); display: inline-flex; align-items: center; gap: 4px; }
.admin-org-sub i { font-size: 10px; color: #B5BBC5; }
/* 套餐信息行：套餐名称 · 起止时间 · 使用情况（席位 / 标签） */
.admin-org-plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #F7F8FA;
    border: 1px solid #EDEFF3;
}
.admin-org-plan > i { font-size: 11px; color: #E37318; flex-shrink: 0; }
.admin-org-plan-name { font-size: 12px; font-weight: 600; color: var(--text-dark, #000); }
.admin-org-plan-period { font-size: 11px; color: var(--text-body, #4B4B4B); font-variant-numeric: tabular-nums; }
.admin-org-plan-usage { font-size: 11px; color: var(--text-secondary, #666); margin-left: auto; }
/* 卡片底部：左「管理成员」按钮 + 右 [···] 更多操作，右下角对齐 */
.admin-org-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* 创建组织行 / 添加成员行 */
.admin-create-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-create-row .form-input { height: 32px; width: 300px; }
.admin-create-row select.form-input { width: 190px; }
.admin-create-note { font-size: 11px; color: var(--text-secondary, #999); width: 100%; margin-top: -4px; }

/* 成员管理顶部组织说明 */
.admin-org-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--color-blue-light, #ECF2FE);
    border: 1px solid rgba(0, 82, 217, 0.14);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    color: var(--color-blue-dark, #003CAB);
    flex-shrink: 0;
}
.admin-org-banner b { font-weight: 600; }

.admin-footer-hint { font-size: 12px; color: var(--text-secondary, #999); text-align: left; flex: 1; }

/* ========== 组织邀请（下拉徽标 + 确认弹窗） ========== */
.user-dd-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--color-red, #D54941);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}
.user-dd-item:hover .user-dd-badge { background: var(--color-red, #D54941); color: #fff; }

.admin-invite-item {
    border: 1px solid #E7E9EF;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #FAFBFC;
}
.admin-invite-item:last-child { margin-bottom: 0; }
.admin-invite-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-body, #4B4B4B);
}
.admin-invite-head > i { color: var(--color-blue, #0052D9); width: 16px; text-align: center; flex-shrink: 0; }
.admin-invite-org {
    font-weight: 600;
    color: var(--text-title, #1E2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-invite-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-invite-acts {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ========== 系统设置（右侧抽屉，仅系统管理员可见） ==========
   入口：用户下拉菜单「系统设置」项（见 admin.js）；
   样式与主界面 .modal 浮层体系保持一致（同款遮罩色、头部、关闭按钮、图标规格）。 */

/* 抽屉整体：fixed 全屏层，深色遮罩 + 右侧面板平滑滑入 */
.settings-drawer {
    position: fixed;
    inset: 0;
    z-index: 4000; /* 高于用户下拉(3000)与普通弹窗 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.settings-drawer.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.22s ease;
}
/* 遮罩与 .modal-overlay 同款（同一浮层体系） */
.settings-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
}
.settings-sheet {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel, #fff);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.10);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.settings-drawer.open .settings-sheet { transform: translateX(0); }

/* 头部：与 .modal-header 规格对齐（同字号标题 + 品牌蓝图标 + 圆形关闭钮） */
.settings-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-color, #DCDCDC);
}
.settings-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark, #000);
}
.settings-close {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--bg-surface, #FAFAFA);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-body, #4B4B4B);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.settings-close:hover {
    background: #FDE9E9;
    color: var(--color-red, #D54941);
}

.settings-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 18px 20px;
}

/* 设置分组：标题沿用工具栏分组标签样式（小字灰 + 等宽图标位） */
.settings-group + .settings-group { margin-top: 14px; }
.settings-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-secondary, #5F6572);
}

/* 图标统一规格：等宽居中位，随标题字号取 1em，品牌主色 */
.settings-title i,
.settings-group-title i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--color-blue, #0052D9);
}

/* 设置项：行式列表（无卡片），以细分隔线分组，贴近 TDesign List */
.settings-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-light, #EEEEEE);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #1D2129); }
.settings-row-desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-secondary, #86909C); }

/* 胶囊开关（原生 checkbox 样式化） */
.settings-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
.settings-switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.settings-switch-track {
    display: block;
    width: 40px;
    height: 22px;
    padding: 2px;
    border-radius: 999px;
    background: var(--bg-tertiary, #DCDCDC);
    transition: background 0.2s ease;
}
.settings-switch-thumb {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transform: translateX(0);
    transition: transform 0.2s ease;
}
.settings-switch input:checked + .settings-switch-track { background: var(--color-blue, #0052D9); }
.settings-switch input:checked + .settings-switch-track .settings-switch-thumb { transform: translateX(18px); }
.settings-switch input:focus-visible + .settings-switch-track { box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.18); }
.settings-switch input:disabled + .settings-switch-track { opacity: 0.55; cursor: not-allowed; }

/* 底部"更多设置项规划中"提示 */
.settings-more-hint {
    margin-top: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #86909C);
    background: var(--bg-surface, #FAFAFA);
    border: 1px dashed var(--border-color, #DCDCDC);
    border-radius: var(--radius-md, 3px);
}
.settings-more-hint i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: #B5BBC5;
}

/* ============================================================
   组织功能订阅（设置抽屉分组 / 用量 / 提醒条 / 购买引导弹窗）
   ============================================================ */

/* ---- 设置项输入控件（文本框 / 数字 / 下拉 / 多行文本） ---- */
.settings-input {
    flex: 0 0 168px;
    height: 28px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-body);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.settings-input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.10);
}
.settings-input-num {
    flex: 0 0 84px;
    text-align: center;
}
.settings-select {
    flex: 0 0 176px;
    height: 28px;
    padding: 0 6px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-body);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    cursor: pointer;
}
.settings-select:focus {
    border-color: var(--color-blue);
}
.settings-textarea {
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    resize: vertical;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.settings-textarea:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.10);
}
.settings-row-stack {
    flex-direction: column;
    align-items: stretch;
}

/* ---- 订阅状态概览卡 ---- */
.org-plan-card {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0052D9 0%, #366EF4 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.org-plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.org-plan-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.org-plan-badge {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.org-plan-state-active   { background: rgba(0, 168, 112, 0.88); }
.org-plan-state-expiring { background: rgba(227, 115, 24, 0.94); }
.org-plan-state-basic    { background: rgba(143, 149, 158, 0.92); }
.org-plan-state-expired  { background: rgba(213, 73, 65, 0.95); }
.org-plan-state-disabled { background: rgba(143, 149, 158, 0.92); }
.org-plan-buy-btn {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    color: #0052D9;
    background: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.org-plan-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.org-plan-card-body {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.org-plan-days {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.org-plan-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
}

/* ---- 用量进度 ---- */
.org-plan-usage {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.org-plan-usage-row + .org-plan-usage-row {
    margin-top: 10px;
}
.org-plan-usage-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.org-plan-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.org-plan-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #366EF4, #0052D9);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.org-plan-bar-fill.is-warn {
    background: linear-gradient(90deg, #E37318, #ED7B2F);
}
.org-plan-bar-fill.is-full {
    background: linear-gradient(90deg, #D54941, #E34D59);
}
.org-plan-usage-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}
.org-plan-save-btn {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 14px;
    font-size: 12px;
    color: #fff;
    background: var(--color-blue);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
}
.org-plan-save-btn:hover { background: var(--color-blue-dark); }
.org-plan-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- 顶部订阅提醒条 ---- */
.org-plan-notice {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
    animation: orgPlanNoticeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.org-plan-notice.is-info    { background: #ECF2FE; color: #0052D9; }
.org-plan-notice.is-warn    { background: #FEF3E6; color: #A2500A; }
.org-plan-notice.is-danger  { background: #FDECEC; color: #A62124; }
.org-plan-notice-icon { flex: 0 0 16px; }
.org-plan-notice-text { flex: 1 1 auto; line-height: 1.5; }
.org-plan-notice-btn {
    flex: 0 0 auto;
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
    color: inherit;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.org-plan-notice-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 18px;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.7;
}
.org-plan-notice-close:hover { opacity: 1; }
@keyframes orgPlanNoticeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* 用户菜单：组织入口受限态（订阅不可用） */
.user-dd-item.org-locked { color: var(--text-secondary); }
.user-dd-item.org-locked::after {
    content: '受限';
    margin-left: auto;
    padding: 0 6px;
    font-size: 11px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ---- 购买 / 续费引导弹窗 ---- */
.org-plan-modal .modal-body {
    padding: 16px 20px;
}
.org-plan-current {
    display: grid;
    /* 固定三列：前两行放短值项，「有效期」独占加宽单元格放最后 */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.org-plan-current-row {
    /* 键 + 值相邻左对齐：值紧跟键排列，不再被 space-between 推到列尾 */
    display: flex;
    align-items: baseline;
    column-gap: 8px;
    font-size: 12px;
}
.org-plan-current-k {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--text-secondary);
}
.org-plan-current-v {
    /* min-width:0 必加：否则长值会撑破列宽，破坏栅格等分 */
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    word-break: break-word;
    font-weight: 500;
    color: var(--text-body);
}
/* 加宽项（如「有效期」）：横跨两列，值不折行（极窄时省略号兜底） */
.org-plan-current-row.is-wide {
    grid-column: span 2;
}
.org-plan-current-row.is-wide .org-plan-current-v {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 窄屏降为两列，加宽项占满整行 */
@media (max-width: 720px) {
    .org-plan-current {
        grid-template-columns: repeat(2, 1fr);
    }
    .org-plan-current-row.is-wide {
        grid-column: 1 / -1;
    }
}
.org-plan-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.org-plan-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.org-plan-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue-light);
}
.org-plan-plan-hot {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.08);
    background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 55%);
}
.org-plan-plan-hot .org-plan-plan-name {
    color: var(--color-blue-dark);
}
.org-plan-plan-tag {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 1px 8px;
    font-size: 11px;
    color: #fff;
    background: var(--color-blue);
    border-radius: 9px;
}
.org-plan-plan-name {
    font-size: 14px;
    font-weight: 600;
}
.org-plan-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 6px 0 10px;
    min-height: 26px;
}
.org-plan-price-origin {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: line-through;
}
.org-plan-price-now {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-blue);
    letter-spacing: 0.2px;
}
.org-plan-price-unit {
    font-size: 12px;
    color: var(--text-secondary);
}
.org-plan-plan-card ul { list-style: none; }
.org-plan-plan-card li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--text-secondary);
}
.org-plan-plan-card li i {
    font-size: 11px;
    color: var(--color-green);
}
.org-plan-contact {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
}
.org-plan-contact-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}
.org-plan-contact-text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .org-plan-plans { grid-template-columns: 1fr; }
}

/* ---- 自助申请试用（未加入组织的普通用户：创建自己的组织） ---- */
.org-plan-selftrial {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 60%);
    border: 1px solid var(--color-blue-light, #BBD3FB);
    border-radius: var(--radius-lg);
}
.org-plan-selftrial-text {
    flex: 1 1 240px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.org-plan-selftrial-text b { color: var(--text-primary, #1F2329); font-weight: 600; }
.self-trial-benefits {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.self-trial-benefits-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}
.self-trial-benefits ul { list-style: none; }
.self-trial-benefits li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.self-trial-benefits li i { font-size: 11px; color: var(--color-green); }

/* ---- 组织卡片订阅徽标（每组织独立订阅） ---- */
.org-plan-tag {
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid transparent;
}
.org-plan-tag-trial    { background: #ECF2FE; color: #0052D9; border-color: #BBD3FB; }
.org-plan-tag-active   { background: #E8F8F2; color: #00875A; border-color: #A6E0C8; }
.org-plan-tag-expiring { background: #FEF3E6; color: #A2500A; border-color: #F5C98C; }
.org-plan-tag-basic    { background: #F1F2F4; color: #4B4B4B; border-color: #DCDFE4; }
.org-plan-tag-expired  { background: #FDECEC; color: #A62124; border-color: #F5B3B3; }
.org-plan-tag-disabled { background: #F1F2F4; color: #8F959E; border-color: #E7E9EB; }

/* ---- 续费 / 调整套餐弹窗 ---- */
.org-plan-edit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}
.org-plan-edit-org {
    font-size: 14px;
    font-weight: 600;
}
.org-plan-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.org-plan-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.org-plan-field-desc {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.org-plan-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.btn-preset {
    flex: 1 1 auto;
    min-width: 92px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    border: 1px solid var(--border, #E7E9EB);
    border-radius: 6px;
    background: #fff;
    color: var(--text-primary, #1F2329);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.btn-preset:hover {
    border-color: var(--primary, #366EF4);
    color: var(--primary, #366EF4);
}
.btn-preset.active {
    border-color: var(--primary, #366EF4);
    background: var(--brand-light, #E3EAFB);
    color: var(--primary, #0052D9);
    font-weight: 500;
    box-shadow: 0 0 0 2px rgba(54,110,244,.15);
}
/* 套餐预设按钮组（续费 / 调整套餐弹窗顶部：点击即代入该套餐的席位 / 标签 / 有效期） */
.org-plan-presets-plan { margin-top: 0; }
.org-plan-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
}
.org-plan-quick-label {
    font-size: 12px;
    font-weight: 500;
}
.org-plan-quick-tip {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ---- 订阅详情弹窗 ---- */
.org-plan-detail-rows {
    display: grid;
    /* 与 .org-plan-current 同口径（行样式共用）：最小列宽 200px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 20px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

/* ========== 套餐订阅订单（下单 / 我的订单 / 核销 / 订单台） ========== */
/* 管理台页签红点：待核销订单数 */
.admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-red, #D54941);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

/* 套餐卡片行动区（「立即订阅」 / 不可下单提示）：统一贴卡片底部 */
.org-plan-plan-act {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color, #E5E7EB);
}
.org-plan-plan-tip {
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: var(--text-secondary, #86909C);
}

/* 下单弹窗：套餐摘要 + 应付金额 */
.po-summary {
    padding: 14px 16px;
    background: var(--bg-surface, #FAFCFF);
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: var(--radius-lg, 8px);
}
.po-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.po-summary-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1D2129);
}
.po-summary-limit {
    font-size: 12px;
    color: var(--text-secondary, #86909C);
}
.po-summary-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
}
.po-price-origin {
    font-size: 12px;
    color: var(--text-secondary, #86909C);
    text-decoration: line-through;
}
.po-price-now {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-red, #D54941);
}
.po-price-unit {
    font-size: 12px;
    color: var(--text-secondary, #86909C);
}
.po-benefits {
    list-style: none;
    margin: 12px 0 0;
}
.po-benefits li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--text-secondary, #4E5969);
}
.po-benefits li i {
    font-size: 11px;
    color: var(--color-green, #2BA471);
}
.po-contact { margin-top: 12px; }
.po-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.po-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--color-blue-light, #ECF2FE);
    border-radius: var(--radius-lg, 8px);
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-blue-dark, #003CAB);
}
.po-hint i { margin-top: 2px; }

/* 分段切换（我的订单 / 订阅记录；订单台状态筛选） */
.po-seg-group {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-surface, #F5F7FA);
    border-radius: 6px;
}
.po-seg {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
    color: var(--text-body, #4E5969);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.po-seg:hover { color: var(--color-blue, #0052D9); }
.po-seg.active {
    background: #fff;
    color: var(--color-blue, #0052D9);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* 订单 / 记录卡片列表 */
.po-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.po-item {
    padding: 12px 14px;
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-light, #E7E9EB);
    border-radius: var(--radius-lg, 8px);
}
.po-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.po-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1D2129);
}
.po-no,
.po-mono {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-secondary, #86909C);
}
.po-item-sub {
    font-size: 12px;
    color: var(--text-secondary, #86909C);
}
.po-item-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-body, #4E5969);
}
.po-item-foot {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary, #86909C);
}
.po-item-note {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-surface, #FAFCFF);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-body, #4E5969);
    word-break: break-all;
}
.po-item-acts {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* 订单台表格：金额右对齐等宽数字，副信息弱化 */
.po-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.po-cell-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary, #86909C);
}

/* 「来自订单」提示条（续费 / 调整套餐弹窗顶部） */
.po-apply-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
    padding: 9px 12px;
    background: var(--color-blue-light, #ECF2FE);
    border: 1px solid rgba(0, 82, 217, .18);
    border-radius: var(--radius-lg, 8px);
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-blue-dark, #003CAB);
}
.po-apply-tip i { margin-top: 2px; }