/* 全局样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 苹果极简主义设计系统 */
:root {
    /* ======== 深空霓虹科技主题基准变量 ======== */
    --color-bg-light: #0E1B2A;        /* 浅层背景（备用浅色） */
    --color-bg-dark: #0A192F;         /* 主背景：深空蓝 */

    /* ======== 背景渐变与纹理 ======== */
    --gradient-1: linear-gradient(135deg, #060B16 0%, #0A192F 55%, #0F2745 100%);
    --gradient-2: linear-gradient(160deg, rgba(0,209,255,0.08) 0%, rgba(141,107,255,0.06) 45%, rgba(10,25,47,0.85) 100%);
    --gradient-3: linear-gradient(225deg, rgba(0,209,255,0.10) 0%, rgba(10,25,47,0.92) 70%, rgba(5,11,20,0.98) 100%);
    --gradient-4: linear-gradient(140deg, #0A192F 0%, #102542 60%, #041122 100%);
    --gradient-5: linear-gradient(310deg, rgba(0,209,255,0.12) 0%, rgba(10,25,47,0.9) 45%, rgba(141,107,255,0.14) 100%);

    --texture-subtle: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 22px);

    /* ======== 色彩系统 ======== */
    --primary-1: #00D1FF;             /* 霓虹蓝高亮 */
    --primary-1-rgb: 0, 209, 255;
    --primary-1-hsl: 190, 100%, 50%;

    --primary: #00B2FF;               /* 主操作纯色 */
    --primary-contrast: #041122;      /* 主操作文字（深底高对比） */
    --accent-1: #5E71FF;              /* 辅助强调蓝紫 */
    --accent-2: #8D6BFF;              /* 图表/标签强调 */

    --neutral-1: #132131;             /* 一级表面 */
    --neutral-2: #16263A;             /* 二级表面 */
    --neutral-3: #1B2C42;             /* 悬停表面 */

    --functional-success: #1EE2A2;    /* 成功提示 */
    --functional-warning: #F9C846;    /* 警告提示 */
    --functional-error: #FF4D6D;      /* 错误危险 */
    --functional-info: #66E0FF;       /* 信息提示 */

    /* ======== 文本层级 ======== */
    --text-primary: #FFFFFF;          /* 主文字（深底） */
    --text-primary-dark: #041122;     /* 主文字（浅底备用） */
    --text-secondary: #E6F1FF;        /* 副标题 */
    --text-body: #D4E3F7;             /* 正文 */
    --text-muted: #8AA7C7;            /* 辅助文字 */

    /* ======== 表面与描边 ======== */
    --color-surface: rgba(13,26,45,0.82);   /* 主卡片毛玻璃 */
    --surface-2: rgba(12,24,40,0.68);       /* 次级卡片 */
    --surface-hover: rgba(20,42,66,0.92);
    --color-border: #1F2A3D;                /* 描边 */
    --border-strong: #2E3D55;               /* 强调描边 */

    --focus: rgba(0,209,255,0.45);          /* 焦点高亮 */
    --danger: #FF4D6D;

    --glass-light-bg: rgba(10,25,47,0.55);
    --glass-light-border: rgba(120,185,255,0.18);
    --glass-dark-bg: rgba(6,14,24,0.75);
    --glass-dark-border: rgba(0,209,255,0.22);

    /* ======== 排版与尺寸 ======== */
    --font-sans: 'Inter', 'HarmonyOS Sans', 'Segoe UI', 'Microsoft YaHei', sans-serif;
    --font-size-1: 13px;
    --font-size-2: 15px;
    --font-size-3: 18px;
    --font-size-4: 24px;
    --font-size-5: 32px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;

    --radius-1: 6px;
    --radius-2: 12px;
    --radius-3: 18px;

    --font-weight-medium: 600;

    --shadow-1: 0 18px 40px rgba(2,12,31,0.42);
    --transition-fast: 160ms ease;
    --transition-medium: 260ms ease;

    /* 兼容旧变量命名 */
    --color-bg: var(--color-bg-dark);
    --color-text: var(--text-body);
    --success: var(--functional-success);
    --warning: var(--functional-warning);
    --accent: var(--accent-1);
    --neutral: var(--neutral-1);
    --primary-3: var(--accent-1);
}

/* ========== 苹果风格深色主题 ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #050D1A;
    --color-surface: rgba(9,20,36,0.88);
    --surface-2: rgba(7,16,30,0.75);
    --surface-hover: rgba(16,39,63,0.95);

    --text-primary: #FFFFFF;
    --text-secondary: #E6F1FF;
    --text-body: #D4E3F7;
    --text-muted: #8AA7C7;

    --color-border: #223148;
    --border-strong: #2E3D55;

    --primary-1: #00D1FF;
    --functional-success: #1EE2A2;
    --functional-warning: #F9C846;
    --danger: #FF4D6D;
    --focus: rgba(0,209,255,0.45);
  }
}

/* UI优化补充：居中导航，避免左右不平衡 */
.nav-bar { justify-content: center; }

/* 结果区开启横向滚动，避免列过多导致截断 */
.results-section { overflow-x: auto; }
.result-table { min-width: 720px; }

/* 小屏表单更易读：标签与输入换行 */
@media (max-width: 768px) {
    .param-row { flex-wrap: wrap; }
    .param-row label { width: 100%; margin-bottom: 6px; }
    .param-row input { width: 100%; }
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-body);
    background:
      var(--gradient-1),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 24px);
    padding: var(--space-3);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-surface);
    padding: clamp(var(--space-3), 4vw, var(--space-5));
    border-radius: var(--radius-3);
    box-shadow:
      0 32px 64px rgba(2,12,31,0.52),
      inset 0 1px rgba(255,255,255,0.18);
    border: 1px solid rgba(0,209,255,0.16);
    position: relative;
    overflow: hidden;
}

.container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(650px 280px at 15% -10%, rgba(102,224,255,0.18), transparent 60%),
                radial-gradient(420px 240px at 80% 110%, rgba(141,107,255,0.22), transparent 70%);
    pointer-events: none;
    opacity: 0.75;
}

h1 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    font-size: clamp(28px, 4vw, var(--font-size-5));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 8px 24px rgba(0,209,255,0.45);
}

h2 {
    color: var(--text-secondary);
    margin: var(--space-3) 0 var(--space-2);
    font-size: clamp(20px, 3vw, var(--font-size-4));
    font-weight: 600;
    letter-spacing: 0.015em;
}

h3 {
    color: var(--text-secondary);
    margin: var(--space-2) 0 var(--space-1);
    font-size: clamp(18px, 2.4vw, var(--font-size-3));
    font-weight: 600;
}

/* 表单样式 */
form {
    margin-bottom: 30px;
}

.common-params {
    background-color: var(--surface-2);
    padding: var(--space-2);
    border-radius: var(--radius-1);
    margin-bottom: var(--space-3);
}

/* common-params 中的h2标题增强 */
.common-params h2 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

@media (prefers-color-scheme: dark) {
    .common-params {
        background-color: var(--surface-2);
    }
    .common-params h2 {
        color: #FFFFFF; /* 纯白确保最高对比度 */
    }
}

/* ui-tech-dark 主题下增强 */
.ui-tech-dark .common-params h2,
.ui-apple-dark .common-params h2,
.ui-darkcold .common-params h2,
.ui-blackglass .common-params h2 {
    color: #FFFFFF !important;
}

.param-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
}

.param-row label {
    width: 150px;
    font-weight: 600; /* 增加字重 */
    color: var(--text-secondary);
}

/* 深色主题下标签增强 */
@media (prefers-color-scheme: dark) {
    .param-row label {
        color: #E6F1FF; /* 使用更亮的浅色 */
    }
}

/* ui-tech-dark 主题下标签增强 */
.ui-tech-dark .param-row label,
.ui-apple-dark .param-row label,
.ui-darkcold .param-row label,
.ui-blackglass .param-row label {
    color: #E6F1FF !important;
}

.param-row input {
    flex: 1;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--text-body);
    font-size: 16px;
    font-weight: 500; /* 增加字重提高可读性 */
    transition: all var(--transition-fast);
}

.param-row input:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--primary);
}

/* 深色主题下输入框增强 */
@media (prefers-color-scheme: dark) {
    .param-row input {
        background: var(--surface-2);
        color: #F6F8FA; /* 使用明亮浅色确保高对比度 */
        border-color: var(--border-strong);
    }
}

/* ui-tech-dark 主题下的特别增强 */
.ui-tech-dark .param-row input,
.ui-apple-dark .param-row input,
.ui-darkcold .param-row input,
.ui-blackglass .param-row input {
    color: #F6F8FA !important;
    background: var(--surface-2) !important;
}

/* SKU行样式 */
#sku-container {
    margin-bottom: 20px;
}

.sku-row {
    display: flex;
    align-items: center;
    background-color: var(--surface-2);
    padding: var(--space-2);
    border-radius: var(--radius-1);
    margin-bottom: var(--space-2);
    position: relative;
}

.sku-inputs {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 10px;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

.input-group label {
    margin-bottom: var(--space-1);
    font-weight: 600; /* 增加字重 */
    font-size: var(--font-size-1);
    color: var(--text-secondary);
}

/* 深色主题下标签增强 */
@media (prefers-color-scheme: dark) {
    .input-group label {
        color: #E6F1FF; /* 使用更亮的浅色 */
    }
}

.input-group input {
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--color-surface);
    color: var(--text-body);
    font-size: 15px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.input-group input:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--primary);
}

/* 深色主题下输入框增强 */
@media (prefers-color-scheme: dark) {
    .input-group input {
        background: var(--surface-2);
        color: #F6F8FA;
        border-color: var(--border-strong);
    }
}

/* ui-tech-dark 主题下的特别增强 */
.ui-tech-dark .input-group input,
.ui-apple-dark .input-group input,
.ui-darkcold .input-group input,
.ui-blackglass .input-group input {
    color: #F6F8FA !important;
    background: var(--surface-2) !important;
}

.ui-tech-dark .input-group label,
.ui-apple-dark .input-group label,
.ui-darkcold .input-group label,
.ui-blackglass .input-group label {
    color: #E6F1FF !important;
}

.remove-sku {
    background-color: var(--danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.remove-sku:hover {
    filter: brightness(0.95);
}

/* ========== 按钮设计方案 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-2);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-3);
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    user-select: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%);
    transform: translateX(-60%);
    transition: transform 320ms ease;
    pointer-events: none;
}

.btn:hover::before { transform: translateX(120%); }

.btn-primary {
    background: linear-gradient(140deg, #00D1FF 0%, #008CFF 55%, #5E71FF 100%);
    color: #FFFFFF;
    border: 1px solid rgba(0,209,255,0.45);
    box-shadow: 0 14px 28px rgba(0,209,255,0.32);
}

.btn-secondary {
    background: linear-gradient(160deg, rgba(0,209,255,0.18) 0%, rgba(94,113,255,0.12) 100%);
    color: var(--text-body);
    border: 1px solid rgba(0,209,255,0.32);
    box-shadow: 0 10px 22px rgba(4,17,34,0.52);
}

.btn-danger {
    background: linear-gradient(150deg, #FF4D6D 0%, #FF1F52 60%, #FF7B93 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255,77,109,0.55);
    box-shadow: 0 14px 28px rgba(255,77,109,0.35);
}

.btn-danger::before { background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 45%); }

.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 18px 36px rgba(0,209,255,0.35);
}

.btn-secondary:hover {
    filter: brightness(1.08);
    box-shadow: 0 16px 32px rgba(4,17,34,0.58);
}

.btn-danger:hover {
    filter: brightness(1.05);
    box-shadow: 0 20px 38px rgba(255,77,109,0.42);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 16px rgba(0,209,255,0.28);
}

.btn-secondary:active { box-shadow: 0 6px 16px rgba(4,17,34,0.48); }
.btn-danger:active { box-shadow: 0 8px 18px rgba(255,77,109,0.38); }

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
    filter: grayscale(0.4);
}

.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0,209,255,0.25);
}

/* 导航栏样式 */
.nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    background-color: var(--color-bg);
    border-radius: var(--radius-2);
}

.button {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.35), transparent 50%);
    transform: translate(-60%, -60%);
    transition: transform 360ms ease;
    pointer-events: none;
}

.button:hover::after { transform: translate(40%, 40%); }

.button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 32px rgba(4,17,34,0.45);
}

.blue {
    background: linear-gradient(135deg, #00D1FF 0%, #008CFF 60%, #5E71FF 100%);
}

.green {
    background: linear-gradient(135deg, #1EE2A2 0%, #0CCFBE 60%, #34F8E3 100%);
    color: #041122;
}

.orange {
    background: linear-gradient(135deg, #F9C846 0%, #FF9F0A 60%, #FFB347 100%);
}

.purple {
    background: linear-gradient(135deg, #8D6BFF 0%, #6A4CFF 60%, #B18CFF 100%);
}

.black {
    background: linear-gradient(135deg, rgba(9,20,36,0.95) 0%, rgba(8,31,54,0.92) 60%, rgba(6,13,27,0.96) 100%);
    border: 1px solid rgba(102,224,255,0.18);
}

.btn-add,
.btn-calculate {
    background: linear-gradient(140deg, #1EE2A2 0%, #0CCFBE 60%, #34F8E3 100%);
    color: #041122;
    border: 1px solid rgba(30,226,162,0.45);
    box-shadow: 0 16px 32px rgba(20,220,180,0.28);
    /* 增大按钮尺寸以提高点击区域和视觉突出度 */
    padding: 18px 28px;
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.btn-add:hover,
.btn-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(20,220,180,0.35);
    filter: brightness(1.08);
}

.btn-add:active,
.btn-calculate:active {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(20,220,180,0.25);
}

/* 按钮焦点状态优化 */
.btn-add:focus-visible,
.btn-calculate:focus-visible,
.btn-reset:focus-visible {
    outline: 3px solid rgba(0,209,255,0.5);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0,209,255,0.2), 0 20px 40px rgba(20,220,180,0.35);
}

.btn-reset {
    background: linear-gradient(150deg, #FF4D6D 0%, #FF1F52 60%, #FF7B93 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255,77,109,0.55);
    /* 增大按钮尺寸 */
    padding: 18px 28px;
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: all var(--transition-medium);
    box-shadow: 0 16px 32px rgba(255,77,109,0.28);
}

.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(255,77,109,0.38);
    filter: brightness(1.08);
}

.btn-reset:active {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(255,77,109,0.25);
}

.btn-export {
    background: linear-gradient(140deg, #66E0FF 0%, #3CB9FF 55%, #8D6BFF 100%);
    color: #041122;
    border: 1px solid rgba(102,224,255,0.42);
    box-shadow: 0 16px 32px rgba(8,68,120,0.32);
}

.btn-export:hover {
    filter: brightness(1.05);
}

.btn-save {
    background-color: #27ae60;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

.btn-save:hover {
    background-color: #219d54;
}

.btn-login {
    background-color: #3498db;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.btn-login:hover {
    background-color: #2980b9;
}

.save-form {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
}

.save-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 200px;
}

.login-prompt {
    display: inline-block;
    margin-left: 15px;
    color: #555;
}

.welcome-text {
    color: var(--text-secondary);
    font-weight: bold;
    margin-right: 10px;
}

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

.calculation-meta {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.calculation-meta p {
    margin: 0;
}

.success-message {
    background-color: #d1fae5; /* success浅底 */
    color: #065f46;            /* 成功文本深色 */
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* 错误消息样式 */
.error-container {
    margin-bottom: 20px;
}

.error-message {
    background-color: #fee2e2; /* danger浅底 */
    border-left: 4px solid var(--danger);
    padding: var(--space-2);
    margin-bottom: var(--space-1);
    border-radius: var(--radius-1);
}

.error-message strong {
    color: var(--danger);
}

.error-message ul {
    margin-top: 5px;
    margin-left: 20px;
}

/* 结果表格样式 */
.results-section {
    margin-top: 30px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.result-table th, .result-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

/* 默认表格数据文字颜色（适应主题） */
.result-table td {
    color: var(--color-text);
}

.result-table th {
    background-color: var(--neutral);
    color: #fff; /* 白字在深灰底上对比≥7:1 */
    font-weight: 600;
}

.result-table tr:nth-child(even) {
    background-color: var(--surface-2);
}

.result-table tr:hover {
    background-color: var(--surface-hover);
}

.result-table tr.high-profit {
    background-color: #c6f7d4; /* 更深的绿色，表示高盈利 */
}

/* 浅色背景需要深色文字以确保对比度 */
.result-table tr.high-profit td {
    color: #0a4d2e; /* 深绿色文字，与浅绿背景形成高对比 */
    font-weight: 500;
}

.result-table tr.high-profit:hover {
    background-color: #a7efc0;
}

.result-table tr.medium-profit {
    background-color: #d4f2d9; /* 中等绿色，表示中等盈利 */
}

.result-table tr.medium-profit td {
    color: #0f5c32; /* 深绿色文字 */
    font-weight: 500;
}

.result-table tr.medium-profit:hover {
    background-color: #c2e9c8;
}

.result-table tr.profit {
    background-color: #e6f7e9; /* 浅绿色，表示微盈利或一般盈利 */
}

.result-table tr.profit td {
    color: #166534; /* 深绿色文字 */
    font-weight: 500;
}

.result-table tr.profit:hover {
    background-color: #d4f2d9;
}

.result-table tr.loss {
    background-color: #fde9e9;
}

.result-table tr.loss td {
    color: #7f1d1d; /* 深红色文字，与浅红背景形成高对比 */
    font-weight: 500;
}

.result-table tr.loss:hover {
    background-color: #fad6d6;
}

/* 分析摘要样式 */
.analysis-summary {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.analysis-item {
    background-color: var(--color-surface);
    padding: var(--space-2);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analysis-item .label {
    font-weight: bold;
    color: var(--text-secondary);
}

.analysis-item .value {
    font-size: 1.1rem;
    color: var(--color-text); /* 使用主题变量，自动适应深浅主题 */
    font-weight: 600;
}

/* 导出部分样式 */
.export-section {
    margin-top: var(--space-3);
    text-align: right;
}

/* 按钮行样式 */
.button-row {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-4); /* 增加上边距 */
    margin-bottom: var(--space-3); /* 添加下边距 */
    gap: var(--space-2);
}

.button-row button {
    flex: 1;
    border: none;
    cursor: pointer;
    transition: all var(--transition-medium);
    /* 确保按钮在一行中对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 悬浮提示（与卡片风格一致） */
.tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip .tooltip-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 125%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-2);
  font-size: var(--font-size-1);
  line-height: 1.5;
  white-space: pre-wrap;
  min-width: 240px;
  z-index: 1000;
  display: none;
}
.tooltip:hover .tooltip-text { display: block; }

/* 触摸设备减少悬停态偏移与滤镜，避免误触视觉跳变 */
@media (hover: none) {
  .button:hover, .btn-add:hover, .btn-reset:hover, .btn-calculate:hover, .btn-export:hover, .large-button:hover {
    filter: none;
    transform: none;
  }
  
  /* 触摸设备上按钮保持高亮效果但不变形 */
  .btn-add:hover,
  .btn-calculate:hover,
  .btn-reset:hover {
    filter: brightness(1.05); /* 保持轻微高亮 */
  }
}

/* 悬浮提示组件（挂载到body） */
.ui-tooltip {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-2);
  font-size: calc(var(--font-size-1) - 2px); /* 缩小1-2个字号 */
  line-height: 1.5;
  white-space: pre-wrap;
  min-width: 240px;
  max-width: 360px;
}
.ui-tooltip .cost-tip { color: #FFFFE0; }

.ui-tooltip .cost-tip {
  color: #FFFFE0; /* 淡黄色字体 */
}

/* 可访问性与反馈 */
.button:focus-visible, input:focus-visible {
    outline: 2px solid rgba(59,130,246,0.4);
    outline-offset: 2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sku-inputs {
        flex-direction: column;
    }
    
    .input-group {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .button-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .button-row button {
        width: 100%;
    }
    
    /* 平板端按钮保持适当大小 */
    .btn-add,
    .btn-calculate,
    .btn-reset {
        padding: 17px 26px;
        font-size: 16px;
        min-height: 54px;
    }
    
    .analysis-grid {
        grid-template-columns: 1fr;
    }
    
    .result-table {
        display: block;
        overflow-x: auto;
    }
}
.hint-muted {
  font-size: var(--font-size-1);
  color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-2);
}

/* 更小屏幕优化：提升可读性与触控舒适度 */
@media (max-width: 480px) {
  body { padding: var(--space-2); }
  h2 { font-size: calc(var(--font-size-3)); }
  h3 { font-size: calc(var(--font-size-2) + 2px); }
  .container { padding: var(--space-2); }
  .param-row { gap: 6px; }
  .param-row label { width: 100%; margin-bottom: 4px; }
  .result-table th, .result-table td { padding: 10px 12px; }
  
  /* 移动端按钮保持较大的点击区域 */
  .btn-add,
  .btn-calculate,
  .btn-reset {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px; /* 确保最小点击高度 */
  }
}

/* 场景A：多盒计算超重控件样式 */
.overweight-controls {
  align-items: center;
  gap: var(--space-2);
  margin: 16px 0;
}
.overweight-label {
  width: auto;
  font-weight: 600;
}
.big-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.big-checkbox:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.big-checkbox:active {
  transform: scale(0.98);
}
.big-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.big-checkbox:checked::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
}

.large-button {
  background: #0b1220; /* 深色背景 */
  color: #f8fafc;      /* 亮色文字 */
  padding: 16px 24px;  /* 比默认增大约30% */
  border-radius: var(--radius-2);
  margin: 12px 16px;   /* 按钮周围增加空间 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background var(--transition-medium), box-shadow var(--transition-medium), transform var(--transition-fast), filter var(--transition-fast);
}
.large-button:hover {
  background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
  filter: brightness(1.02);
}
.large-button:active {
  transform: translateY(1px);
}

/* 高DPI屏幕优化：细分隔线在Retina上更柔和 */
@media (min-resolution: 2dppx) {
  .result-table th, .result-table td { border-bottom: 1px solid var(--color-border); }
}

/* 动效降级：减少运动偏好时禁用动画与过渡 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}