html { font-size: 115%; }
body { font-family: 'Inter', sans-serif; background-color: #ffffff; }
    .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    .accent-bg { background-color: #A3FF12; }
    .accent-text { color: #A3FF12; }
    
    /* 兼容保留 */
    #app { min-height: 100vh; display: flex; flex-direction: column; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* 进度日志区域 */
    .progress-log {
      display: block;
      min-height: 40px;
      max-height: 320px;
      overflow-y: auto;
      padding: 4px 0;
    }
    .progress-log.hidden { display: none !important; }

    /* ── Login Page (SmartStockPick V1.5) ── */
    #login-page {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 8vh;
      padding-bottom: 8vh;
      background-color: #f8faf7;
      background-image:
        radial-gradient(at 0% 0%, rgba(163, 255, 18, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(8, 39, 24, 0.03) 0px, transparent 50%);
      min-height: 100vh;
    }
    .flip-wrapper {
      width: 100%;
      max-width: 480px;
      perspective: 1400px;
    }
    .flip-inner {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.15, 1.0);
    }
    .flip-inner.flipped {
      transform: rotateY(180deg);
    }
    .card-front,
    .card-back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .card-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      transform: rotateY(180deg);
    }
    .login-card {
      background: white;
      border-radius: 40px;
      padding: 60px;
      box-shadow: 0 40px 100px rgba(8, 39, 24, 0.08);
      width: 100%;
      border: 1px solid rgba(194, 200, 193, 0.2);
    }
    .login-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
      margin-bottom: 48px;
    }
    .login-form { display: flex; flex-direction: column; gap: 24px; }
    .input-group { display: flex; flex-direction: column; gap: 8px; }
    .login-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #4a6631; opacity: 0.6; }
    .login-error {
      background-color: #fff1f0;
      color: #cf1322;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      display: none;
      border: 1px solid #ffa39e;
    }
    .demo-tip {
      margin-top: 32px;
      padding: 16px;
      background: #f8faf7;
      border-radius: 20px;
      text-align: center;
      border: 1px dashed #c2c8c1;
    }

    /* ── Main App ── */
    #main-app { flex: 1; display: flex; flex-direction: row; height: 100vh; overflow: hidden; }

    /* ── Sidebar (V3.11) ── */
    .app-sidebar {
      width: 260px;
      height: 100%;
      border-right: 1px solid var(--surface-container-high);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      background-color: var(--surface-container-lowest);
    }
    .app-sidebar-logo {
      padding: var(--space-6) var(--space-5);
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    .app-sidebar-nav {
      flex: 1;
      padding: 0 var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .app-sidebar .tab {
      justify-content: flex-start;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-lg);
      width: 100%;
    }
    .app-header {
      background-color: var(--surface-container-lowest);
      box-shadow: var(--shadow-sm);
      padding: var(--space-4) var(--space-8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .app-header-left { display: flex; align-items: center; gap: var(--space-4); }
    .header-logo {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--primary), var(--primary-container));
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--on-primary);
      font-size: 0.875rem;
    }
    .app-header-right { display: flex; align-items: center; gap: var(--space-3); }
    .user-chip {
      background-color: var(--surface-container-highest);
      border-radius: var(--radius-full);
      padding: var(--space-2) var(--space-4);
      font-size: var(--text-body-sm);
      font-weight: 500;
      color: var(--on-surface);
    }

    /* ── Tab Content ── */
    .main-content-scroll { flex: 1; overflow-y: auto; background-color: var(--background); }
    .tab-content { padding: var(--space-8); max-width: 1440px; margin: 0 auto; width: 100%; }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── Market Tab ── */
    .market-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-6);
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .market-date {
      font-size: var(--text-body-sm);
      color: var(--on-surface-variant);
    }
    .market-report-sections { display: flex; flex-direction: column; gap: var(--space-3); }
    .market-section-body { color: var(--on-surface); line-height: var(--line-height-relaxed); }
    .market-section-body h3 { font-size: var(--text-title-md); margin: var(--space-3) 0 var(--space-2); }
    .market-section-body p { margin-bottom: var(--space-3); }
    .market-section-body ul { padding-left: var(--space-5); margin-bottom: var(--space-3); }
    .market-section-body li { margin-bottom: var(--space-1); }
    .market-section-body strong { font-weight: 600; color: var(--primary); }
    .market-section-body table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-body-sm); }
    .market-section-body th { background: var(--surface-container-highest); padding: var(--space-2) var(--space-3); text-align: left; font-weight: 600; }
    .market-section-body td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--surface-container-high); }

    /* ── Decision Tab ── */
    .decision-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); align-items: start; }
    .decision-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
    .sidebar-section-title { font-size: var(--text-label-md); font-weight: 600; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: var(--space-3); }
    .stock-list { display: flex; flex-direction: column; gap: var(--space-2); }
    .stock-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--surface-container-highest);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
    }
    .stock-symbol { font-weight: 600; font-size: var(--text-body-md); color: var(--primary); }
    .stock-remove { background: none; border: none; cursor: pointer; color: var(--on-surface-variant); font-size: 1.1rem; padding: 0 var(--space-1); }
    .stock-remove:hover { color: var(--error); }
    .stock-add-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
    .stock-add-row .input { border-radius: var(--radius-full); font-size: var(--text-body-sm); padding: var(--space-2) var(--space-3); }

    /* Decision Cards */
    .decision-cards { display: flex; flex-direction: column; gap: var(--space-5); }
    .decision-card { background: var(--surface-container-lowest); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
    .decision-card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--space-5) var(--space-6);
      cursor: pointer;
      background: var(--surface-container-lowest);
    }
    .decision-card-header:hover { background: var(--surface-container-low); }
    .decision-card-symbol { font-size: var(--text-headline-sm); font-weight: 700; }
    .decision-card-meta { display: flex; align-items: center; gap: var(--space-4); }
    .decision-card-body { padding: 0 var(--space-6) var(--space-6); display: none; }
    .decision-card-body.open { display: block; }

    .drive-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-3);
      margin: var(--space-4) 0;
    }
    .drive-item {
      background: var(--surface-container-low);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
    }
    .drive-label {
      font-size: var(--text-label-md);
      font-weight: 700;
      letter-spacing: var(--letter-spacing-wide);
      color: var(--primary);
      margin-bottom: var(--space-2);
    }
    .drive-name { font-size: var(--text-label-sm); color: var(--on-surface-variant); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.03em; }
    .drive-text { font-size: var(--text-body-sm); color: var(--on-surface); line-height: 1.5; }

    .decision-section { margin-top: var(--space-5); }
    .decision-section-label { font-size: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--on-surface-variant); font-weight: 600; margin-bottom: var(--space-2); }
    .rules-list { display: flex; flex-direction: column; gap: var(--space-2); }
    .rule-chip {
      background: var(--primary-fixed);
      color: var(--on-primary-fixed);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-body-sm);
    }
    .risk-box {
      background: var(--error-container);
      color: var(--on-error-container);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-body-sm);
    }
    .advice-box {
      background: var(--secondary-container);
      color: var(--on-secondary-container);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-body-sm);
      font-weight: 500;
    }
    .tradingview-widget { margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; }

    .decision-summary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
      color: var(--on-primary);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      margin-top: var(--space-5);
    }
    .decision-summary-label { font-size: var(--text-label-md); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); opacity: 0.7; margin-bottom: var(--space-3); }

    /* ── Strategy Tab ── */
    .strategy-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
    .strategy-list { display: flex; flex-direction: column; gap: var(--space-2); }
    .strategy-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .strategy-item:hover { background: var(--surface-container); }
    .strategy-item.active { background: var(--primary-fixed); color: var(--on-primary-fixed); }
    .strategy-item-name { font-weight: 500; font-size: var(--text-body-md); }
    .strategy-item-del { background: none; border: none; cursor: pointer; color: var(--on-surface-variant); opacity: 0; transition: opacity var(--transition-fast); }
    .strategy-item:hover .strategy-item-del { opacity: 1; }
    .strategy-item.active .strategy-item-del { color: var(--on-primary-fixed); opacity: 0.6; }

    .upload-area {
      border: 2px dashed var(--outline-variant);
      border-radius: var(--radius-xl);
      padding: var(--space-10);
      text-align: center;
      cursor: pointer;
      transition: all var(--transition-fast);
      margin-bottom: var(--space-5);
    }
    .upload-area:hover, .upload-area.drag-over {
      border-color: var(--secondary);
      background: var(--surface-container-low);
    }
    .upload-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }

    /* Rules Table */
    .rules-table-wrap { overflow-x: auto; }
    .rules-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
    .rules-table th {
      background: var(--surface-container-highest);
      padding: var(--space-3) var(--space-4);
      text-align: left;
      font-size: var(--text-label-sm);
      font-weight: 600;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color: var(--on-surface-variant);
      white-space: nowrap;
    }
    .rules-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--surface-container-high); vertical-align: top; }
    .rules-table tr:hover td { background: var(--surface-container-low); }
    .rules-table tr.disabled td { opacity: 0.4; text-decoration: line-through; }
    .rule-content-cell { max-width: 360px; line-height: 1.5; }
    .duplicate-tag { display: inline-block; background: #fff3cd; color: #856404; border-radius: var(--radius-full); padding: 2px 8px; font-size: 0.65rem; font-weight: 600; margin-left: var(--space-2); }

    /* Preview Table */
    .preview-table-wrap .rules-table tr.is-duplicate td { background: #fffbe6; }

    /* ── Empty States ── */
    .empty-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: var(--space-16) var(--space-8); text-align: center; color: var(--on-surface-variant);
    }
    .empty-state-icon { font-size: 3rem; margin-bottom: var(--space-4); opacity: 0.4; }

    /* ── Loading overlay ── */
    .loading-overlay {
      display: flex; align-items: center; justify-content: center;
      gap: var(--space-3); padding: var(--space-8);
      color: var(--on-surface-variant);
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .decision-layout, .strategy-layout { grid-template-columns: 1fr; }
      .drive-grid { grid-template-columns: repeat(2, 1fr); }
      .tab-content { padding: var(--space-4); }
      .app-header { padding: var(--space-3) var(--space-4); }
    }

    /* ── Toast ── */
    .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 9999;
      pointer-events: none;
    }
    .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: #1a2e1a;
      color: #e8f0e8;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 10px 18px;
      border-radius: 9999px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      pointer-events: all;
      animation: toast-in 0.3s forwards;
    }
    .toast.toast-success::before { content: '✓'; color: #A3FF12; }
    .toast.toast-error::before   { content: '✕'; color: #ff9999; }
    .toast.toast-info::before    { content: '·'; color: #8bc5a3; }
    @keyframes toast-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

/* ── Skeleton Screen (P1-5) ── */
.skeleton-box {
  background: linear-gradient(90deg, #e8ece5 25%, #f0f4ed 50%, #e8ece5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}