* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      text-align: center;
      color: white;
      margin-bottom: 30px;
    }

    .header h1 {
      font-size: 32px;
      margin-bottom: 10px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    }

    .header p {
      font-size: 16px;
      opacity: 0.9;
    }

    .card {
      background: white;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }

    .card-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      border-left: 4px solid #3B82F6;
      padding-left: 12px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .input-group {
      margin-bottom: 20px;
    }

    .input-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #555;
      font-size: 14px;
    }

    .input-group input,
    .input-group select {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      transition: all 0.3s;
    }

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

    .input-suffix {
      position: relative;
    }

    .input-suffix input {
      padding-right: 50px;
    }

    .input-suffix::after {
      content: attr(data-suffix);
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 14px;
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      border-bottom: 2px solid #e0e0e0;
    }

    .tab {
      padding: 12px 24px;
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      color: #666;
      transition: all 0.3s;
    }

    .tab.active {
      color: #3B82F6;
      border-bottom-color: #3B82F6;
    }

    .tab:hover {
      color: #3B82F6;
    }

    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 10px;
    }

    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .checkbox-item input[type="checkbox"] {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .checkbox-item label {
      margin: 0;
      cursor: pointer;
      font-weight: 400;
    }

    .result-section {
      background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
      color: white;
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 30px;
    }

    .result-main {
      text-align: center;
      margin-bottom: 30px;
    }

    .result-main h2 {
      font-size: 18px;
      opacity: 0.9;
      margin-bottom: 10px;
    }

    .result-main .price {
      font-size: 56px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .result-main .profit {
      font-size: 18px;
      opacity: 0.9;
    }

    .result-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .result-item {
      background: rgba(255, 255, 255, 0.15);
      padding: 20px;
      border-radius: 8px;
      backdrop-filter: blur(10px);
    }

    .result-item-title {
      font-size: 14px;
      opacity: 0.8;
      margin-bottom: 8px;
    }

    .result-item-value {
      font-size: 24px;
      font-weight: bold;
    }

    .fee-breakdown {
      margin-top: 20px;
    }

    .fee-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
    }

    .fee-item:last-child {
      border-bottom: none;
    }

    .fee-label {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #555;
    }

    .fee-badge {
      display: inline-block;
      padding: 4px 8px;
      background: #f0f0f0;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
    }

    .fee-value {
      font-weight: bold;
      font-size: 18px;
      color: #333;
    }

    .fee-total {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
    }

    .fee-total .fee-item {
      border: none;
      padding: 10px 0;
    }

    .fee-total .fee-label {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .fee-total .fee-value {
      font-size: 24px;
      color: #3B82F6;
    }

    .profit-analysis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .profit-card {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    .profit-card h3 {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .profit-card .value {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .profit-card .value.positive {
      color: #28a745;
    }

    .profit-card .value.negative {
      color: #dc3545;
    }

    .profit-card .value.neutral {
      color: #3B82F6;
    }

    .info-box {
      background: #e3f2fd;
      border-left: 4px solid #2196f3;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .info-box h4 {
      color: #1976d2;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .info-box ul {
      margin-left: 20px;
      color: #555;
      line-height: 1.6;
    }

    .warning-box {
      background: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .warning-box h4 {
      color: #856404;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .warning-box p {
      color: #856404;
      line-height: 1.6;
      margin: 0;
    }

    .loading {
      text-align: center;
      padding: 20px;
      color: #3B82F6;
      font-size: 16px;
    }

    @media (max-width: 768px) {
      .grid {
        grid-template-columns: 1fr;
      }

      .result-main .price {
        font-size: 42px;
      }
    }
    .category-search-wrapper {
      position: relative;
    }

    /* 逐级联动选择器 */
    .category-cascade {
      display: flex;
      gap: 8px;
      margin-bottom: 0;
    }

    .category-select {
      flex: 1;
      padding: 10px 12px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      background: white;
      transition: border-color 0.2s;
      min-width: 0;
    }

    .category-select:focus {
      border-color: #3B82F6;
      outline: none;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .category-select:disabled {
      background: #f5f5f5;
      color: #999;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .category-cascade {
        flex-direction: column;
        gap: 6px;
      }
    }

    .category-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: 300px;
      overflow-y: auto;
      background: white;
      border: 2px solid #3B82F6;
      border-top: none;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 1000;
    }

    .category-dropdown-item {
      padding: 10px 16px;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
      transition: background 0.2s;
    }

    .category-dropdown-item:hover {
      background: #f8f9ff;
    }

    .category-dropdown-item:last-child {
      border-bottom: none;
    }

    .category-dropdown-item .cat-path {
      font-size: 14px;
      color: #333;
    }

    .category-dropdown-item .cat-fee {
      font-size: 12px;
      color: #3B82F6;
      margin-left: 8px;
    }

    .category-dropdown-empty {
      padding: 20px;
      text-align: center;
      color: #999;
    }

    /* ==================== 模板管理栏 ==================== */
    .template-bar {
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .template-bar-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .template-controls {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        flex-wrap: wrap;
    }

    .template-field {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .template-field label {
        font-size: 11px;
        color: #888;
        font-weight: 500;
    }

    .template-select {
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
        background: #fff;
        min-width: 160px;
    }

    .template-select:focus {
        outline: none;
        border-color: #3B82F6;
    }

    .template-actions {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .tmpl-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
        font-size: 12px;
        color: #555;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .tmpl-btn:hover:not(:disabled) {
        background: #f5f5f5;
        border-color: #bbb;
    }

    .tmpl-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .tmpl-btn-save { color: #2563eb; border-color: #93c5fd; }
    .tmpl-btn-save:hover:not(:disabled) { background: #eff6ff; }

    .tmpl-btn-default { color: #d97706; border-color: #fcd34d; }
    .tmpl-btn-default:hover:not(:disabled) { background: #fffbeb; }

    .tmpl-btn-delete { color: #dc2626; border-color: #fca5a5; }
    .tmpl-btn-delete:hover:not(:disabled) { background: #fef2f2; }

    .template-status {
        margin-top: 6px;
        font-size: 12px;
    }

    .status-success { color: #16a34a; }
    .status-error { color: #dc2626; }

    @media (max-width: 768px) {
        .template-controls { flex-direction: column; align-items: stretch; }
        .template-actions { justify-content: flex-start; }
    }

    /* ==================== 自动模式 ==================== */
    /* 总开关 */
    .auto-master-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s;
        border: 1px solid #d9d9d9;
        background: #fafafa;
    }
    .auto-master-toggle:hover {
        border-color: #3B82F6;
    }
    .auto-master-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        transition: background 0.3s;
    }
    .auto-master-dot.on {
        background: #52c41a;
        box-shadow: 0 0 4px rgba(82, 196, 26, 0.4);
    }
    .auto-master-dot.off {
        background: #999;
    }

    /* 子开关 */
    .auto-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: 12px;
        font-size: 12px;
        font-weight: normal;
        color: #1890ff;
        cursor: pointer;
        user-select: none;
    }
    .auto-toggle input[type="checkbox"] {
        width: 14px;
        height: 14px;
        accent-color: #1890ff;
        cursor: pointer;
    }

    .auto-placeholder {
        padding: 10px 12px;
        background: #f0f7ff;
        border: 1px dashed #91caff;
        border-radius: 8px;
        color: #1890ff;
        font-size: 13px;
    }

    /* ===== Refactored from inline styles ===== */
    .back-link {
      color: #666;
      text-decoration: none;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 8px;
    }
    .template-field-min { min-width: 200px; }
    .card-title-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .icon-info { color: #1890ff; }
    .small-muted {
      color: #999;
      display: block;
      margin-top: 5px;
    }
    .small-muted-tight {
      color: #999;
      display: block;
      margin-top: 4px;
    }
    .small-muted-tip {
      color: #666;
      display: block;
      margin-top: 10px;
      font-size: 11px;
    }
    .refresh-rate-btn {
      margin-left: 10px;
      padding: 4px 12px;
      border: 1px solid #2563eb;
      background: white;
      color: #2563eb;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
    }
    .custom-shipping-panel {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 15px;
    }
    .custom-shipping-title {
      margin: 0 0 12px 0;
      font-size: 14px;
      color: #333;
    }
    .input-group-mb-10 { margin-bottom: 10px; }
    .input-group-mb-0 { margin-bottom: 0; }
    .label-sm { font-size: 12px; }
    .input-group .inline-checkbox-label input[type="checkbox"],
    .input-group .free-shipping-label input[type="checkbox"],
    .input-group .battery-checkbox,
    .input-group .checkbox-auto {
      width: 18px;
      height: 18px;
      padding: 0;
      margin: 0;
      border-radius: 4px;
      cursor: pointer;
      flex: 0 0 auto;
      accent-color: #3B82F6;
    }
    .text-warn { color: #e74c3c; }
    .text-warn-block {
      color: #e74c3c;
      display: block;
      margin-top: 4px;
    }
    .text-orange-block {
      color: #e67e22;
      display: block;
      margin-top: 4px;
    }
    .free-shipping-row {
      display: flex;
      align-items: center;
      margin-top: 8px;
    }
    .input-group .inline-checkbox-label,
    .input-group .free-shipping-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 0;
      font-weight: 400;
      color: #555;
      line-height: 1.4;
      cursor: pointer;
    }
    .min-profit-wrap { margin-top: 10px; }
    .min-profit-label {
      font-size: 13px;
      color: #555;
      margin-bottom: 6px;
      display: block;
    }
    .min-profit-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .currency-prefix { color: #666; }
    .min-profit-input {
      width: 120px;
      padding: 10px 12px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
    }
    .min-profit-suffix {
      color: #999;
      font-size: 13px;
    }
    .min-profit-jpy {
      color: #999;
      font-size: 12px;
      white-space: nowrap;
    }
    .target-profit-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .target-profit-input {
      flex: 1 1 auto;
      width: auto;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      min-width: 0;
    }
    .profit-currency-select {
      flex: 0 0 96px;
      width: 96px;
      min-width: 96px;
      padding: 12px 8px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      text-align: center;
    }
    .category-search-wrapper-mt { margin-top: 8px; }
    .selected-category-info {
      color: #666;
      margin-top: 5px;
      display: block;
    }
    .move-fee-input { background: #f5f5f5; }
    .price-auto-large {
      color: rgba(255,255,255,0.85);
      font-size: 28px;
    }
    .result-item-auto { color: rgba(255,255,255,0.7); }
    .result-auto-text { color: #1890ff; }
    .text-green { color: #52c41a; }
    .profit-card-desc {
      color: #666;
      font-size: 14px;
      margin-top: 5px;
    }
    .info-box-mt { margin-top: 20px; }