/* 员工福利（员工餐、商家挂账、员工 8 折兑换码）的样式。紧跟在 style.css 之后加载。 */

.meal-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.meal-summary-item {
    background: #f9fafb;
    border: 1px solid #eceff4;
    border-radius: 12px;
    padding: 10px 12px;
}

.meal-summary-label {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.meal-summary-value {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

/* 老板页：今日 / 历史各 3 张 — 手机起即 3 列，两行排满 6 张 */
.meal-summary-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .meal-summary-grid-compact {
        gap: 9px;
    }
}

.meal-summary-card-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
    padding: 5px 6px;
    border-radius: 8px;
}

.meal-summary-grid-compact .meal-summary-label {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    color: #9ca3af;
}

.meal-summary-grid-compact .meal-summary-value {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
}

/* 老板页：区块纵向间距统一 */
.meal-boss-section-gap {
    margin-top: 8px !important;
}

/* 商家未结算（位于 mealUnpaidSettleWrap 内）与下方员工点餐状态卡拉开距离 */
.meal-employee-status-card {
    margin-top: 14px !important;
}

/* 未结算结算区：无数据时一行摘要 */
.meal-unpaid-summary-compact {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 10px;
    border: 1px solid #eceff4;
    background: #fafafa;
}

/* 无未结算：与金额卡同节奏的轻提示 */
.meal-empty-summary {
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 8px;
    border: 1px solid #eceff4;
    background: #f9fafb;
    color: #64748b;
}

/* 有未结算时：整块压缩 */
.meal-unpaid-summary-compact-block {
    padding: 8px 10px 10px;
    margin-bottom: 0;
}

.meal-unpaid-summary-compact-block .section-title {
    margin-bottom: 0;
}

.meal-unpaid-compact-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 4px;
}

.meal-unpaid-compact-sub {
    margin-bottom: 4px;
}

.meal-unpaid-compact-list {
    margin-top: 4px !important;
    gap: 4px !important;
}

.meal-unpaid-user-row-compact.compact-item {
    padding: 6px 8px;
}

.meal-unpaid-user-actions {
    margin-top: 4px !important;
    gap: 6px;
}

.meal-unpaid-vendor-compact {
    margin-top: 8px !important;
    padding-top: 6px;
    border-top: 1px solid #eceff4;
}

/* 老板页：未结算拆成「员工自点餐」+「商家挂账」两卡片 */
.meal-unpaid-split {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meal-unpaid-split > .card.meal-unpaid-card {
    margin-bottom: 0;
    padding: 8px 10px 10px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.meal-unpaid-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 6px;
}

.meal-unpaid-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
}

.meal-unpaid-staff-card {
    padding: 6px 8px;
    border: 1px solid #eceff4;
    border-radius: 10px;
    background: #fafafa;
    min-width: 0;
}

.meal-unpaid-staff-card-name {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
    word-break: break-word;
}

.meal-unpaid-staff-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 6px;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
}

.meal-unpaid-staff-card-amt {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
}

.meal-unpaid-staff-card-actions {
    margin-top: 6px;
}

.meal-unpaid-staff-btn {
    width: 100%;
    padding: 5px 8px;
    min-height: 30px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    box-sizing: border-box;
}

.meal-unpaid-staff-empty {
    grid-column: 1 / -1;
    padding: 8px 6px;
    text-align: center;
}

.meal-unpaid-vendor-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.meal-unpaid-vendor-amount-block {
    min-width: 0;
}

.meal-unpaid-vendor-amount {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.meal-unpaid-vendor-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.meal-range-card {
    padding: 12px;
}

.meal-range-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.meal-range-controls label {
    display: flex;
    flex: 1 1 145px;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569;
}

.meal-range-controls select,
.meal-range-controls input {
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
}

.meal-range-controls button {
    min-height: 36px;
}

.meal-range-result {
    margin-top: 10px;
}

.meal-range-total {
    margin-bottom: 8px;
    color: #111827;
}

.meal-range-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.meal-range-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid #eceff4;
    border-radius: 8px;
    background: #fafafa;
    color: #374151;
}

.meal-item-row {
    background: #ffffff;
}

/* 老板页员工餐列表：两列网格 + 紧凑卡片（仅 renderMealList） */
#mealListWrap.list,
#mealListWrap.meal-boss-list-gap {
    margin-top: 8px !important;
}

#mealListWrap .meal-record-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

#mealListWrap .meal-record-card-compact.compact-item {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#mealListWrap .meal-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

#mealListWrap .meal-record-header-name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 750;
    line-height: 1.25;
    color: #111827;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mealListWrap .meal-record-header-right {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

#mealListWrap .meal-record-status.status {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 2px 5px;
    white-space: nowrap;
}

#mealListWrap .meal-record-amt {
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.2;
    color: #111827;
    white-space: nowrap;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

#mealListWrap .meal-record-subtext {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

#mealListWrap .meal-record-shift,
#mealListWrap .meal-record-confirmed {
    display: block;
    min-width: 0;
    line-height: 1.35;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mealListWrap .meal-record-confirmed {
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
}

#mealListWrap .meal-record-meta {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#mealListWrap .meal-record-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

#mealListWrap .meal-record-meta-lbl {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: #94a3b8;
}

#mealListWrap .meal-record-meta-val {
    flex: 1;
    min-width: 0;
}

#mealListWrap .meal-record-pay-txt {
    line-height: 1.25;
    padding: 2px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

#mealListWrap .meal-record-mode-readonly {
    line-height: 1.25;
    padding: 2px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
}

#mealListWrap .meal-record-meta-val select {
    width: 100%;
    min-height: 28px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-sizing: border-box;
}

#mealListWrap .meal-record-actions-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    margin-top: 5px;
}

#mealListWrap .meal-record-actions-inline .meal-save-btn-compact {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    min-height: 28px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
}

#mealListWrap .meal-record-actions-inline .meal-settle-check {
    flex: 0 1 auto;
    font-size: 10px;
    gap: 4px;
    margin: 0;
}

#mealListWrap .meal-record-actions-inline .meal-settle-check input {
    width: 14px;
    height: 14px;
}

.meal-save-btn-compact.small-btn {
    padding: 5px 12px;
    min-height: 30px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
}

.meal-remove-btn-compact.small-btn {
    padding: 5px 12px;
    min-height: 30px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
}

.meal-item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.meal-settle-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
}

.meal-settle-check input {
    width: 16px;
    height: 16px;
}

.meal-unpaid-card {
    margin-bottom: 0;
    box-shadow: none;
    border: 1px solid #eceff4;
}

.meal-unpaid-amount {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.meal-vendor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.meal-staff-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f9fafb;
    border: 1px solid #eceff4;
    border-radius: 12px;
    padding: 10px 14px;
}

.meal-staff-date-toolbar {
    margin-bottom: 8px;
}

.meal-staff-intro {
    margin-bottom: 8px;
}

.meal-staff-recent-section {
    margin-top: 20px;
}

/* staff/manager 顶部当前记录卡：左右分区，状态用 badge，金额右侧强调 */
.meal-staff-today-card {
    padding: 10px 12px;
}

.meal-staff-today-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.meal-staff-today-left {
    min-width: 0;
    flex: 1;
}

.meal-staff-today-shift {
    margin-top: 2px;
}

.meal-staff-today-order-wrap {
    margin-top: 2px;
}

.meal-staff-today-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.meal-staff-today-amount {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
}

/* 仅 staff/manager 的”我的未结算补贴总额”金额强化，不影响 boss 看板 */
#mealStaffMyUnpaidValue {
    margin-top: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f172a;
    white-space: nowrap;
    flex-shrink: 0;
}

.meal-sub-title {
    font-size: 15px;
    margin-bottom: 0;
}

.meal-sub-title--secondary {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
}

.meal-staff-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.meal-staff-action-btn {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 700;
}

.meal-manager-others-block {
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.meal-manager-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.meal-manager-quick-actions .small-btn {
    flex: 1 1 auto;
    min-width: 5.5rem;
}

.meal-pending-confirm-card {
    margin-top: 12px;
}

.meal-pending-confirm-card--manager {
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    margin: 0 0 14px;
}

.meal-pending-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.meal-pending-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #c2410c;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.meal-pending-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.meal-pending-summary span {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #eceff4;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

.meal-pending-summary strong {
    color: #111827;
}

.meal-pending-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.meal-pending-filter-row .small-btn {
    width: 100%;
    min-width: 0;
    padding: 7px 6px;
    font-size: 12px;
    border-radius: 8px;
}

.meal-pending-filter-row .small-btn.is-active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.meal-pending-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meal-pending-date-group {
    border: 1px solid #eceff4;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.meal-pending-date-title {
    padding: 8px 10px;
    background: #f9fafb;
    color: #374151;
    font-size: 13px;
    font-weight: 800;
}

.meal-pending-row {
    padding: 9px 10px;
    border-top: 1px solid #f1f5f9;
}

.meal-pending-row-main {
    min-width: 0;
}

.meal-pending-name {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
}

.meal-pending-actions,
.meal-staff-pending-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.meal-pending-actions .small-btn,
.meal-staff-pending-actions .small-btn {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 5px;
    font-size: 12px;
    border-radius: 8px;
}

.meal-pending-footer .small-btn {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
}

.meal-staff-pending-reminder {
    margin: 0 0 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(249, 115, 22, 0.35);
    background: #fff7ed;
}

.meal-staff-pending-title {
    color: #9a3412;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

/* 员工餐顶部：日期行 /（老板）设置行+操作行 */
.meal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meal-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.meal-date-row {
    width: 100%;
}

/* 老板：日期 + 查看 同一行工具组 */
.meal-date-tool-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.meal-date-tool-group .meal-date-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
}

.meal-date-tool-group .meal-reload-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    min-width: 4.5rem;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}

.meal-setting-row {
    justify-content: flex-start;
    padding: 1px 0;
}

.meal-setting-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
}

.meal-setting-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #64748b;
}

.meal-subsidy-setting {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #eceff4;
    border-radius: 10px;
    background: #fafafa;
}

.meal-subsidy-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.meal-subsidy-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.meal-subsidy-edit-row input {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
}

/* 老板：补充用餐人 + 两按钮 同高、同圆角、节奏统一 */
.meal-action-row-boss {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

.meal-action-row-boss .meal-extra-user-select {
    flex: 1 1 100%;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
}

.meal-action-row-boss .meal-action-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.meal-action-row-boss .meal-action-btn--primary {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

/* 仅「添加用餐人」可见时拉满一行，避免半宽悬空 */
.meal-action-row-boss:has(#mealSettleBtn.hidden) #mealAddExtraBtn.meal-action-btn {
    flex: 1 1 100%;
}

/* 补充用餐人作为列表前置工具条，与上下分区拉开层级 */
.meal-list-pre-toolbar {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 8px;
    border: 1px solid #eceff4;
    border-radius: 12px;
    background: #fafafa;
    gap: 8px;
}

.meal-list-pre-toolbar .meal-extra-user-select {
    min-height: 38px;
    background: #ffffff;
}

.meal-date-quick-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meal-date-quick-btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-weight: 800;
    color: #111827;
}

.meal-date-quick-btn.active {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.meal-date-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-weight: 800;
    color: #111827;
}

.meal-current-order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.meal-current-order-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
}

.meal-order-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.meal-order-badge--vendor {
    background: #1e3a8a;
    color: #f8fafc;
    box-shadow: 0 1px 2px rgba(30, 58, 138, 0.25);
}

.meal-order-badge--self {
    background: #ecfdf5;
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.35);
}

.meal-order-badge--pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.45);
}

.meal-order-badge--legacy {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.35);
}

.meal-order-secondary-line {
    line-height: 1.4;
}

@keyframes meal-manager-row-highlight {
    0% {
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.55);
        background-color: rgba(209, 250, 229, 0.92);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        background-color: transparent;
    }
}

.meal-manager-row-flash {
    animation: meal-manager-row-highlight 1s ease-out forwards;
    border-radius: 10px;
}

@keyframes meal-manager-just-updated-fade {
    0%,
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.meal-manager-just-updated {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    animation: meal-manager-just-updated-fade 2s ease forwards;
}

@media (max-width: 420px) {
    /* 老板页金额卡使用 .meal-summary-grid-compact，不在此压成 1 列 */
    .meal-summary-grid:not(.meal-summary-grid-compact),
    .meal-item-grid {
        grid-template-columns: 1fr;
    }

    .meal-staff-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   员工折扣兑换码（共用组件：老板录入 / 员工查看）
   ============================================================ */
.mdc-staff-content { margin-top: 10px; }

.mdc-staff-body { display: flex; flex-direction: column; gap: 0; }

.mdc-code-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.mdc-code-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1e3a8a;
    word-break: break-all;
}

.mdc-missing-tip {
    display: flex;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 4px;
}

.mdc-copy-btn { margin-top: 10px; }

.mdc-guide {
    border-top: 1px solid #e2e8f0;
    padding-top: 8px;
    line-height: 1.55;
}

/* ---- 员工 / 店长：员工折扣兑换码折叠卡（classic 基线 + 全主题回退） ---- */
#mealDiscountCodeStaffCard.mdc-staff-discount-acc {
    position: relative;
    margin-bottom: 18px;
    --mdc-staff-motion-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

#mealDiscountCodeStaffCard.mdc-staff-discount-acc::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.72;
    background: linear-gradient(
        180deg,
        color-mix(in oklab, oklch(0.58 0.12 275) 8%, transparent) 0%,
        transparent 52%
    );
}

body[data-theme="classic"] #mealDiscountCodeStaffCard.mdc-staff-discount-acc::before {
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--classic-indigo-soft) 58%, transparent) 0%,
        color-mix(in oklab, var(--classic-surface) 18%, transparent) 44%,
        transparent 72%
    );
}

#mealDiscountCodeStaffCard.mdc-staff-discount-acc .mdc-staff-discount-hd,
#mealDiscountCodeStaffCard.mdc-staff-discount-acc .meal-boss-accordion-body {
    position: relative;
    z-index: 1;
}

.mdc-staff-discount-hd {
    align-items: center;
    gap: 14px;
    min-height: 68px;
    transition:
        transform 0.12s var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)),
        background-color 0.2s ease;
}

.mdc-staff-discount-hd:active {
    transform: scale(0.985);
}

.mdc-staff-discount-chevron {
    display: inline-block;
    transform-origin: 50% 45%;
    transition:
        transform 220ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)),
        color 0.2s var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1));
}

#mealDiscountCodeStaffCard.mdc-staff-discount-acc--open .mdc-staff-discount-chevron {
    transform: rotate(180deg);
}

#mealDiscountCodeStaffCard.mdc-staff-discount-acc--open .mdc-staff-discount-medallion {
    transform: scale(1.04);
}

.mdc-staff-discount-hd:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--classic-blue-focus, #9bc0ff) 70%, transparent);
}

body[data-theme="classic"] .mdc-staff-discount-hd:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--classic-blue-soft) 65%, var(--classic-blue-strong));
}

.mdc-staff-discount-medallion {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #4338ca;
    background: linear-gradient(155deg, color-mix(in oklab, oklch(0.95 0.05 275) 92%, white) 0%, #eef2ff 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition:
        transform 240ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)),
        box-shadow 0.28s var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1));
}

body[data-theme="classic"] .mdc-staff-discount-medallion {
    color: var(--classic-indigo-strong);
    background: linear-gradient(
        155deg,
        color-mix(in oklab, var(--classic-indigo-soft) 88%, white) 0%,
        color-mix(in oklab, var(--classic-surface-muted) 94%, var(--classic-indigo-soft)) 100%
    );
    box-shadow:
        0 1px 0 color-mix(in oklab, white 70%, transparent) inset,
        0 8px 14px color-mix(in oklab, var(--classic-indigo-strong) 12%, transparent);
}

#mealDiscountCodeStaffCard .meal-boss-accordion-titles {
    gap: 5px;
}

#mealDiscountCodeStaffCard .mdc-staff-content.mdc-accordion-inner {
    margin-top: 0;
    padding-top: 4px;
}

@keyframes mdcStaffDiscountLoadingPulse {
    from { opacity: 0.48; }
    to { opacity: 1; }
}

.mdc-staff-discount-loading {
    padding: 16px 4px 20px;
    letter-spacing: 0.02em;
    animation: mdcStaffDiscountLoadingPulse 1.05s var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) infinite alternate;
}

@keyframes mdcStaffDiscountFadeUp {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mealDiscountCodeStaffCard.mdc-staff-discount-acc--open #mealDiscountCodeStaffBody:not(.hidden) > .mdc-staff-content {
    animation: mdcStaffDiscountFadeUp 235ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) both;
}

#mealDiscountCodeStaffContent.mdc-staff-content--animate-in .mdc-staff-code-panel {
    animation: mdcStaffDiscountFadeUp 275ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) both;
}

#mealDiscountCodeStaffContent.mdc-staff-content--animate-in .mdc-guide--staff-discount {
    animation: mdcStaffDiscountFadeUp 275ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) both;
    animation-delay: 72ms;
}

@keyframes mdcStaffCopyOk {
    0% { transform: scale(1); }
    40% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

#mealDiscountCodeStaffCard .mdc-staff-copy-btn.mdc-staff-copy-btn--ok:not([disabled]) {
    animation: mdcStaffCopyOk 520ms var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)) both;
}

.mdc-staff-discount-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mdc-staff-code-panel {
    display: grid;
    gap: 10px;
}

.mdc-staff-code-panel--ready {
    grid-template-columns: minmax(0, 1fr);
}

.mdc-code-box.mdc-code-box--staff {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    margin-top: 0;
    border-radius: 18px;
    background: color-mix(in oklab, oklch(0.58 0.2 258) 6%, oklch(0.99 0.004 248));
    border: 1px solid color-mix(in oklab, oklch(0.58 0.14 258) 22%, oklch(0.9 0.014 248));
}

body[data-theme="classic"] .mdc-code-box.mdc-code-box--staff {
    background: color-mix(in oklab, var(--classic-blue-soft) 78%, var(--classic-surface));
    border: 1px solid color-mix(in oklab, var(--classic-blue-strong) 22%, var(--classic-line));
}

.mdc-code-box.mdc-code-box--staff.mdc-code-box--empty {
    background: color-mix(in oklab, oklch(0.58 0.2 258) 2%, oklch(0.99 0.004 248));
    border-color: color-mix(in oklab, oklch(0.58 0.14 258) 10%, oklch(0.9 0.014 248));
}

body[data-theme="classic"] .mdc-code-box.mdc-code-box--staff.mdc-code-box--empty {
    background: var(--classic-surface-muted);
    border-color: var(--classic-line);
}

.mdc-code-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mdc-code-box-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mdc-code-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

body[data-theme="classic"] .mdc-code-kicker {
    color: var(--classic-text-faint);
}

.mdc-code-text.mdc-code-text--staff {
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: #1e3a8a;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

body[data-theme="classic"] .mdc-code-text.mdc-code-text--staff {
    color: var(--classic-blue-strong);
    letter-spacing: 0.035em;
}

.mdc-code-status-pill {
    flex-shrink: 0;
}

.mdc-staff-validity {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

body[data-theme="classic"] .mdc-staff-validity {
    color: var(--classic-text-soft);
}

.mdc-staff-validity-dates {
    font-weight: 600;
    color: #334155;
}

body[data-theme="classic"] .mdc-staff-validity-dates {
    color: var(--classic-text);
}

.mdc-staff-copy-btn {
    margin-top: 0;
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font-size: var(--classic-text-body, 1rem);
    font-weight: 700;
    transition:
        transform 0.14s var(--mdc-staff-motion-ease, cubic-bezier(0.25, 1, 0.5, 1)),
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

#mealDiscountCodeStaffCard .mdc-staff-copy-btn:not([disabled]):active {
    transform: scale(0.988);
}

body[data-theme="classic"] .mdc-staff-copy-btn.primary {
    letter-spacing: -0.01em;
}

.mdc-staff-code-panel--empty .mdc-staff-copy-btn.secondary {
    opacity: 0.55;
}

.mdc-guide.mdc-guide--staff-discount {
    border-top: none;
    padding: 0;
    margin-top: 0 !important;
    border-radius: 0;
    border: 0;
    background: transparent;
}

body[data-theme="classic"] .mdc-guide.mdc-guide--staff-discount {
    border: 0;
    background: transparent;
    color: var(--classic-text-soft) !important;
}

.mdc-guide--staff-discount p {
    margin: 0;
}

.mdc-guide-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
}

.mdc-guide--staff-discount .mdc-guide-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

body[data-theme="classic"] .mdc-guide--staff-discount .mdc-guide-title {
    color: var(--classic-text);
}

.mdc-guide-channel {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

body[data-theme="classic"] .mdc-guide-channel {
    color: var(--classic-text-faint);
}

.mdc-guide--staff-discount .mdc-guide-path {
    display: block;
    margin-top: 4px;
}

.mdc-guide--staff-discount .mdc-guide-note {
    display: block;
    margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
    #mealDiscountCodeStaffCard .mdc-staff-discount-loading {
        animation: none !important;
        opacity: 0.88;
    }

    #mealDiscountCodeStaffCard .mdc-staff-discount-chevron,
    #mealDiscountCodeStaffCard .mdc-staff-discount-medallion,
    #mealDiscountCodeStaffCard .mdc-staff-discount-hd,
    #mealDiscountCodeStaffCard .mdc-staff-copy-btn {
        transition: none !important;
    }

    #mealDiscountCodeStaffCard .mdc-staff-discount-hd:active,
    #mealDiscountCodeStaffCard .mdc-staff-copy-btn:active {
        transform: none !important;
    }

    #mealDiscountCodeStaffCard.mdc-staff-discount-acc--open .mdc-staff-discount-medallion {
        transform: none !important;
    }

    /* 无过渡，仅保留收起/展开的箭头朝向 */
    #mealDiscountCodeStaffCard.mdc-staff-discount-acc--open .mdc-staff-discount-chevron {
        transform: rotate(180deg) !important;
    }

    #mealDiscountCodeStaffCard.mdc-staff-discount-acc--open #mealDiscountCodeStaffBody:not(.hidden) > .mdc-staff-content,
    #mealDiscountCodeStaffContent.mdc-staff-content--animate-in .mdc-staff-code-panel,
    #mealDiscountCodeStaffContent.mdc-staff-content--animate-in .mdc-guide--staff-discount,
    #mealDiscountCodeStaffCard .mdc-staff-copy-btn.mdc-staff-copy-btn--ok {
        animation: none !important;
    }
}

@media (min-width: 560px) {
    .mdc-staff-code-panel--ready {
        grid-template-columns: minmax(0, 1fr) 148px;
        align-items: stretch;
    }

    .mdc-staff-copy-btn {
        min-height: 100%;
    }
}

@media (max-width: 480px) {
    #mealDiscountCodeStaffCard.mdc-staff-discount-acc {
        border-radius: 22px;
    }

    .mdc-staff-discount-hd {
        gap: 12px;
        min-height: 64px;
    }

    .mdc-staff-discount-medallion {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .mdc-code-box.mdc-code-box--staff {
        padding: 14px;
    }
}

/* ---- badges ---- */
.mdc-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.mdc-badge--active {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.mdc-badge--missing {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid rgba(234, 88, 12, 0.3);
}

.mdc-badge--expired {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.mdc-badge--future {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ---- boss summary ---- */
.mdc-boss-summary {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.mdc-boss-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, oklch(0.56 0.15 255) 24%, #dbe7f5);
    border-radius: 20px;
    padding: 18px;
    background:
        linear-gradient(135deg, color-mix(in oklab, oklch(0.97 0.025 255) 92%, white), #ffffff 48%),
        linear-gradient(145deg, color-mix(in oklab, oklch(0.62 0.16 250) 14%, transparent), transparent 64%);
}

.mdc-boss-hero::after {
    content: "8";
    position: absolute;
    right: -10px;
    bottom: -38px;
    pointer-events: none;
    font-size: 7.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    color: color-mix(in oklab, oklch(0.57 0.16 255) 10%, transparent);
}

body[data-theme="classic"] .mdc-boss-hero {
    border-color: color-mix(in oklab, var(--classic-blue-strong) 20%, var(--classic-line));
    background:
        linear-gradient(135deg, color-mix(in oklab, var(--classic-blue-soft) 74%, var(--classic-surface)) 0%, var(--classic-surface) 52%),
        linear-gradient(145deg, color-mix(in oklab, var(--classic-indigo-soft) 42%, transparent), transparent 66%);
}

body[data-theme="classic"] .mdc-boss-hero::after {
    color: color-mix(in oklab, var(--classic-blue-strong) 9%, transparent);
}

.mdc-boss-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mdc-boss-hero-kicker {
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
    background: color-mix(in oklab, oklch(0.55 0.17 255) 10%, white);
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
}

body[data-theme="classic"] .mdc-boss-hero-kicker {
    background: color-mix(in oklab, var(--classic-blue-soft) 70%, white);
    color: var(--classic-blue-strong);
}

.mdc-boss-hero-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #0f172a;
}

body[data-theme="classic"] .mdc-boss-hero-title {
    color: var(--classic-text);
}

.mdc-boss-hero-validity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    max-width: 34em;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
}

body[data-theme="classic"] .mdc-boss-hero-validity {
    color: var(--classic-text-soft);
}

.mdc-boss-hero-validity-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.mdc-boss-hero-validity-dates {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

body[data-theme="classic"] .mdc-boss-hero-validity-label {
    color: var(--classic-text-faint);
}

body[data-theme="classic"] .mdc-boss-hero-validity-dates {
    color: var(--classic-text);
}

.mdc-boss-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mdc-boss-stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 10px;
    background: #f8fafc;
}

.mdc-boss-stat-num {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.mdc-boss-stat-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.3;
}

.mdc-boss-stat--active {
    border-color: color-mix(in oklab, #10b981 24%, #dbe7f5);
    background: color-mix(in oklab, #d1fae5 56%, #ffffff);
}

.mdc-boss-stat--missing {
    border-color: color-mix(in oklab, #f97316 24%, #dbe7f5);
    background: color-mix(in oklab, #ffedd5 54%, #ffffff);
}

body[data-theme="classic"] .mdc-boss-stat {
    border-color: var(--classic-line);
    background: var(--classic-surface-muted);
}

body[data-theme="classic"] .mdc-boss-stat--active {
    border-color: color-mix(in oklab, #10b981 24%, var(--classic-line));
    background: color-mix(in oklab, #d1fae5 52%, var(--classic-surface));
}

body[data-theme="classic"] .mdc-boss-stat--missing {
    border-color: color-mix(in oklab, #f97316 24%, var(--classic-line));
    background: color-mix(in oklab, #ffedd5 48%, var(--classic-surface));
}

body[data-theme="classic"] .mdc-boss-stat-num {
    color: var(--classic-text);
}

body[data-theme="classic"] .mdc-boss-stat-label {
    color: var(--classic-text-soft);
}

.mdc-boss-month-pick {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
    min-height: 44px;
    border: 1px solid color-mix(in oklab, oklch(0.56 0.15 255) 18%, #dbe7f5);
    border-radius: 14px;
    padding: 8px 10px 8px 12px;
    background: color-mix(in oklab, white 86%, oklch(0.96 0.02 255));
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.3;
}

.mdc-boss-month-select {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

body[data-theme="classic"] .mdc-boss-month-pick {
    border-color: color-mix(in oklab, var(--classic-blue-strong) 18%, var(--classic-line));
    background: color-mix(in oklab, var(--classic-surface) 86%, var(--classic-blue-soft));
    color: var(--classic-text-soft);
}

body[data-theme="classic"] .mdc-boss-month-select {
    border-color: color-mix(in oklab, var(--classic-blue-strong) 18%, var(--classic-line));
    color: var(--classic-text);
}

.mdc-boss-manage-toggle {
    align-self: stretch;
    min-height: 44px;
    border-radius: 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ---- boss manage panel ---- */
.mdc-manage-wrap { margin-top: 16px; }

.mdc-manage-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mdc-manage-row {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 12px;
    background: #ffffff;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.mdc-manage-row:focus-within {
    border-color: color-mix(in oklab, #3b82f6 42%, #dbe7f5);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.mdc-manage-row--missing {
    background: color-mix(in oklab, #fff7ed 48%, #ffffff);
}

body[data-theme="classic"] .mdc-manage-row {
    border-color: var(--classic-line);
    background: var(--classic-surface);
}

body[data-theme="classic"] .mdc-manage-row:focus-within {
    border-color: color-mix(in oklab, var(--classic-blue-strong) 34%, var(--classic-line));
    box-shadow: 0 14px 28px color-mix(in oklab, var(--classic-blue-strong) 10%, transparent);
}

body[data-theme="classic"] .mdc-manage-row--missing {
    background: color-mix(in oklab, #fff7ed 44%, var(--classic-surface));
}

.mdc-manage-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mdc-manage-name {
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdc-manage-status {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mdc-manage-row-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdc-code-input {
    flex: 1;
    min-width: 130px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.015em;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.mdc-code-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.14); }

.mdc-manage-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.mdc-manage-btns .small-btn {
    min-height: 42px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ml/mt helpers (scoped to mdc) */
.mdc-boss-info-row .ml8 { margin-left: 8px; }

.mdc-boss-stats-row .ml6 { margin-left: 6px; }

.mdc-missing-tip .ml6 { margin-left: 6px; }

@media (max-width: 480px) {
    .mdc-manage-row-body { flex-direction: column; align-items: stretch; }

    .mdc-code-input { min-width: 0; width: 100%; }

    .mdc-manage-btns { justify-content: flex-end; }
}

/* ============================================================
   老板员工餐 Tab — 折叠分区 accordion
   ============================================================ */
.meal-boss-accordion {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
    margin-bottom: 14px;
    overflow: hidden;
}

body[data-theme="classic"] .meal-boss-accordion {
    border: 1px solid rgba(223, 232, 242, 0.92);
    border-radius: 24px;
    background: var(--classic-surface);
    box-shadow: var(--classic-shadow-card);
}

.meal-boss-accordion-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body[data-theme="classic"] .meal-boss-accordion-hd {
    padding: 18px 20px;
}

.meal-boss-accordion-hd:hover {
    background: rgba(0, 0, 0, 0.02);
}

.meal-boss-accordion-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.meal-boss-accordion-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

body[data-theme="classic"] .meal-boss-accordion-title {
    font-size: var(--classic-text-heading, 1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--classic-text, #1e293b);
}

.meal-boss-accordion-sub {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.meal-boss-accordion-summary {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-boss-accordion-summary:empty {
    display: none;
}

.meal-boss-accordion-inner-card {
    margin: 8px 12px 0;
}

body[data-theme="classic"] .meal-boss-accordion-inner-card {
    margin: 10px 14px 0;
}

.meal-boss-accordion-chevron {
    font-size: 0.7rem;
    color: #94a3b8;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
}

.meal-boss-accordion-chevron--collapsed {
    color: #cbd5e1;
}

/* Body: expanded (default for section 1) */
.meal-boss-accordion-body {
    padding: 0 0 8px;
}

body[data-theme="classic"] .meal-boss-accordion-body {
    padding: 0 0 10px;
}

/* Inner content area for discount section (no extra card nesting) */
.mdc-accordion-inner {
    padding: 0 16px 6px;
}

body[data-theme="classic"] .mdc-accordion-inner {
    padding: 0 20px 8px;
}

/* Divider between accordion header and body */
.meal-boss-accordion-body:not(.hidden) {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body[data-theme="classic"] .meal-boss-accordion-body:not(.hidden) {
    border-top: 1px solid rgba(223, 232, 242, 0.7);
}

/* Cards inside accordion body keep their own bottom margin */
.meal-boss-accordion-body .card:last-child {
    margin-bottom: 4px;
}

@media (max-width: 480px) {
    .meal-boss-accordion-hd { padding: 12px 14px; }

    .meal-boss-accordion-title { font-size: 0.875rem; }

    .mdc-accordion-inner { padding: 0 14px 6px; }
}

/* ══════════════════════════════════════════════════════════════
   员工福利 Tab — 视觉强化
   ══════════════════════════════════════════════════════════════ */

/* — 8折 badge：紧跟标题右侧 — */
.mdc-staff-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.mdc-staff-pct-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.5;
    background: oklch(0.58 0.2 258);
    color: #fff;
    flex-shrink: 0;
}

body[data-theme="classic"] .mdc-staff-pct-badge {
    background: var(--classic-blue);
    color: #fff;
}

/* — 兑换码文本：更大、更醒目 — */
body[data-theme="classic"] .mdc-code-text.mdc-code-text--staff {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
    font-weight: 900;
    letter-spacing: 0.07em;
    color: var(--classic-blue-strong);
}

/* — 未结算补贴总额：从灰框升级为余额看板 — */
body[data-theme="classic"] .meal-staff-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: color-mix(in oklab, var(--classic-blue-soft) 58%, var(--classic-surface));
    border: 1px solid color-mix(in oklab, var(--classic-blue-strong) 18%, var(--classic-line));
    border-radius: 20px;
    padding: 16px 20px;
}

body[data-theme="classic"] .meal-staff-summary .meal-summary-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--classic-text-soft);
    line-height: 1;
}

body[data-theme="classic"] #mealStaffMyUnpaidValue {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--classic-text);
    line-height: 1;
    white-space: nowrap;
}

/* — 兑换引导：步骤列表 — */
.mdc-guide-steps {
    margin: 10px 0 4px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: mdc-step;
}

.mdc-guide-steps li {
    counter-increment: mdc-step;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
}

body[data-theme="classic"] .mdc-guide-steps li {
    color: var(--classic-text-soft);
}

.mdc-guide-steps li::before {
    content: counter(mdc-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    background: oklch(0.94 0.03 255);
    color: oklch(0.49 0.2 258);
    margin-top: 1px;
}

body[data-theme="classic"] .mdc-guide-steps li::before {
    background: var(--classic-blue-soft);
    color: var(--classic-blue-strong);
}

.mdc-guide-note {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

body[data-theme="classic"] .mdc-guide-note {
    color: var(--classic-text-faint);
}