@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
.deactivated-container[data-v-63f64ae2] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  padding: 2rem;
}
.deactivated-card[data-v-63f64ae2] {
  max-width: 480px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
}
.icon-container[data-v-63f64ae2] {
  margin-bottom: 1.5rem;
}
.warning-icon[data-v-63f64ae2] {
  width: 64px;
  height: 64px;
  color: #f59e0b;
}
.title[data-v-63f64ae2] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem 0;
}
.message[data-v-63f64ae2] {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 2rem 0;
}
.info-box[data-v-63f64ae2] {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: left;
  margin-bottom: 2rem;
}
.info-box p[data-v-63f64ae2] {
  color: #f59e0b;
  font-weight: 500;
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
}
.info-box ul[data-v-63f64ae2] {
  margin: 0;
  padding-left: 1.25rem;
}
.info-box li[data-v-63f64ae2] {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.info-box li[data-v-63f64ae2]:last-child {
  margin-bottom: 0;
}
.contact-section[data-v-63f64ae2] {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.contact-label[data-v-63f64ae2] {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin: 0 0 0.5rem 0;
}
.contact-link[data-v-63f64ae2] {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.contact-link[data-v-63f64ae2]:hover {
  color: #8b8fff;
}

.login-container[data-v-c503c2a3] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  padding: 2rem;
}
.login-card[data-v-c503c2a3] {
  width: 100%;
  max-width: 400px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
}
.icon-container[data-v-c503c2a3] {
  margin-bottom: 1.5rem;
}
.lock-icon[data-v-c503c2a3],
.reset-icon[data-v-c503c2a3] {
  width: 56px;
  height: 56px;
  color: var(--accent);
}
.title[data-v-c503c2a3] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem 0;
}
.message[data-v-c503c2a3] {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

/* Success Message */
.success-box[data-v-c503c2a3] {
  background: rgba(var(--profit-rgb), 0.1);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}
.success-icon[data-v-c503c2a3] {
  width: 20px;
  height: 20px;
  color: var(--profit);
  flex-shrink: 0;
}
.success-message[data-v-c503c2a3] {
  color: var(--profit);
  font-size: 0.875rem;
  margin: 0;
}

/* Lockout State */
.lockout-box[data-v-c503c2a3] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}
.lockout-icon[data-v-c503c2a3] {
  width: 24px;
  height: 24px;
  color: var(--loss);
  flex-shrink: 0;
  margin-top: 2px;
}
.lockout-content[data-v-c503c2a3] {
  flex: 1;
}
.lockout-title[data-v-c503c2a3] {
  color: var(--loss);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.25rem 0;
}
.lockout-message[data-v-c503c2a3] {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
}
.lockout-timer[data-v-c503c2a3] {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: monospace;
  margin: 0;
}

/* Form Styles */
.login-form[data-v-c503c2a3] {
  text-align: left;
}
.input-group[data-v-c503c2a3] {
  margin-bottom: 1rem;
}
.input-label[data-v-c503c2a3] {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.input-wrapper[data-v-c503c2a3] {
  position: relative;
  display: flex;
  align-items: center;
}
.text-input[data-v-c503c2a3],
.password-input[data-v-c503c2a3] {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.password-input[data-v-c503c2a3] {
  padding-right: 3rem;
}
.pin-input[data-v-c503c2a3] {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  font-weight: 600;
}
.text-input[data-v-c503c2a3]:focus,
.password-input[data-v-c503c2a3]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.text-input[data-v-c503c2a3]:disabled,
.password-input[data-v-c503c2a3]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.text-input[data-v-c503c2a3]::placeholder,
.password-input[data-v-c503c2a3]::placeholder {
  color: var(--text-mute);
}
.toggle-password[data-v-c503c2a3] {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-mute);
  transition: color 0.2s;
}
.toggle-password[data-v-c503c2a3]:hover:not(:disabled) {
  color: var(--text-dim);
}
.toggle-password[data-v-c503c2a3]:disabled {
  cursor: not-allowed;
}
.toggle-password svg[data-v-c503c2a3] {
  width: 20px;
  height: 20px;
}

/* Password Requirements */
.requirements-box[data-v-c503c2a3] {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.requirements-list[data-v-c503c2a3] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.requirements-list li[data-v-c503c2a3] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-mute);
  font-size: 0.85rem;
  transition: color 0.2s;
  margin-bottom: 0.25rem;
}
.requirements-list li[data-v-c503c2a3]:last-child {
  margin-bottom: 0;
}
.requirements-list li.met[data-v-c503c2a3] {
  color: var(--profit);
}
.check-icon[data-v-c503c2a3] {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.requirements-list li.met .check-icon[data-v-c503c2a3] {
  opacity: 1;
}

/* Captcha */
.captcha-group[data-v-c503c2a3] {
  margin-bottom: 1.25rem;
}
.captcha-container[data-v-c503c2a3] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.captcha-challenge[data-v-c503c2a3] {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  font-family: monospace;
  text-align: center;
}
.captcha-loading[data-v-c503c2a3] {
  color: var(--text-mute);
  font-size: 0.9rem;
  font-weight: normal;
}
.captcha-refresh[data-v-c503c2a3] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  color: var(--text-mute);
  transition: color 0.2s, border-color 0.2s;
}
.captcha-refresh[data-v-c503c2a3]:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.captcha-refresh[data-v-c503c2a3]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.captcha-refresh svg[data-v-c503c2a3] {
  width: 20px;
  height: 20px;
}
.captcha-input[data-v-c503c2a3] {
  margin-top: 0;
}

/* Error State */
.error-box[data-v-c503c2a3] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}
.error-message[data-v-c503c2a3] {
  color: var(--loss);
  font-size: 0.875rem;
  margin: 0;
}
.attempts-warning[data-v-c503c2a3] {
  color: #f59e0b;
  font-size: 0.8rem;
  margin: 0.5rem 0 0 0;
}

/* Buttons */
.submit-button[data-v-c503c2a3] {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.submit-button[data-v-c503c2a3]:hover:not(:disabled) {
  background: #5558e3;
}
.submit-button[data-v-c503c2a3]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.reset-button[data-v-c503c2a3] {
  background: var(--profit);
}
.reset-button[data-v-c503c2a3]:hover:not(:disabled) {
  background: #059669;
}
.forgot-password-link[data-v-c503c2a3],
.back-to-login-link[data-v-c503c2a3] {
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password-link[data-v-c503c2a3]:hover,
.back-to-login-link[data-v-c503c2a3]:hover {
  color: #8b8fff;
  text-decoration: underline;
}

/* Spinner */
.spinner[data-v-c503c2a3] {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-c503c2a3 0.8s linear infinite;
}
@keyframes spin-c503c2a3 {
to {
    transform: rotate(360deg);
}
}

.setup-container[data-v-957d9bb9] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  padding: 2rem;
}
.setup-card[data-v-957d9bb9] {
  width: 100%;
  max-width: 440px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
}
.icon-container[data-v-957d9bb9] {
  margin-bottom: 1.25rem;
}
.shield-icon[data-v-957d9bb9] {
  width: 52px;
  height: 52px;
  color: var(--profit);
}
.title[data-v-957d9bb9] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem 0;
}
.message[data-v-957d9bb9] {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 1.75rem 0;
}

/* Form Styles */
.setup-form[data-v-957d9bb9] {
  text-align: left;
}
.input-group[data-v-957d9bb9] {
  margin-bottom: 1rem;
}
.input-label[data-v-957d9bb9] {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.input-wrapper[data-v-957d9bb9] {
  position: relative;
  display: flex;
  align-items: center;
}
.text-input[data-v-957d9bb9],
.password-input[data-v-957d9bb9] {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.password-input[data-v-957d9bb9] {
  padding-right: 2.75rem;
}
.text-input[data-v-957d9bb9]:focus,
.password-input[data-v-957d9bb9]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.text-input.input-error[data-v-957d9bb9],
.password-input.input-error[data-v-957d9bb9] {
  border-color: var(--loss);
}
.text-input[data-v-957d9bb9]:disabled,
.password-input[data-v-957d9bb9]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.text-input[data-v-957d9bb9]::placeholder,
.password-input[data-v-957d9bb9]::placeholder {
  color: var(--text-mute);
}
.toggle-password[data-v-957d9bb9] {
  position: absolute;
  right: 0.625rem;
  background: none;
  border: none;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--text-mute);
  transition: color 0.2s;
}
.toggle-password[data-v-957d9bb9]:hover:not(:disabled) {
  color: var(--text-dim);
}
.toggle-password[data-v-957d9bb9]:disabled {
  cursor: not-allowed;
}
.toggle-password svg[data-v-957d9bb9] {
  width: 18px;
  height: 18px;
}
.field-error[data-v-957d9bb9] {
  color: var(--loss);
  font-size: 0.8rem;
  margin: 0.375rem 0 0 0;
}

/* Requirements Box */
.requirements-box[data-v-957d9bb9] {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}
.requirements-title[data-v-957d9bb9] {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}
.requirements-list[data-v-957d9bb9] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.requirements-list li[data-v-957d9bb9] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-mute);
  font-size: 0.85rem;
  transition: color 0.2s;
}
.requirements-list li.met[data-v-957d9bb9] {
  color: var(--profit);
}
.check-icon[data-v-957d9bb9] {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.requirements-list li.met .check-icon[data-v-957d9bb9] {
  opacity: 1;
}

/* Error Box */
.error-box[data-v-957d9bb9] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.error-message[data-v-957d9bb9] {
  color: var(--loss);
  font-size: 0.85rem;
  margin: 0;
}

/* Submit Button */
.submit-button[data-v-957d9bb9] {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--profit);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.submit-button[data-v-957d9bb9]:hover:not(:disabled) {
  background: #059669;
}
.submit-button[data-v-957d9bb9]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner */
.spinner[data-v-957d9bb9] {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-957d9bb9 0.8s linear infinite;
}
@keyframes spin-957d9bb9 {
to {
    transform: rotate(360deg);
}
}

/* Security Note */
.security-note[data-v-957d9bb9] {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin: 1.25rem 0 0 0;
  text-align: center;
}

.acct-switcher[data-v-cdc637f2] {
  position: relative;
  display: inline-flex;
}
.acct-trigger[data-v-cdc637f2] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color var(--dur-fast, 0.15s), background var(--dur-fast, 0.15s);
}
.acct-trigger[data-v-cdc637f2]:hover:not(:disabled),
.acct-trigger.open[data-v-cdc637f2] {
  border-color: var(--accent);
}
.acct-trigger[data-v-cdc637f2]:disabled { opacity: 0.6; cursor: default;
}
.acct-ico[data-v-cdc637f2] { flex: 0 0 auto; color: var(--accent);
}
.acct-current[data-v-cdc637f2] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-caret[data-v-cdc637f2] { font-size: 0.65rem; opacity: 0.7;
}
.acct-pop[data-v-cdc637f2] {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  max-width: 300px;
  padding: 6px;
  background: var(--panel-solid, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3));
}
.acct-pop-head[data-v-cdc637f2] {
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  opacity: 0.55;
}
.acct-list[data-v-cdc637f2] { list-style: none; margin: 0; padding: 0;
}
.acct-item[data-v-cdc637f2] {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm, 6px);
}
.acct-item[data-v-cdc637f2]:hover { background: rgba(var(--accent-rgb, 90, 120, 255), 0.08);
}
.acct-name-btn[data-v-cdc637f2] {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  text-align: left;
}
.acct-name-btn[data-v-cdc637f2]:disabled { cursor: default;
}
.acct-dot[data-v-cdc637f2] {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong, var(--border));
}
.acct-dot.on[data-v-cdc637f2] { background: var(--profit, #22c55e); box-shadow: 0 0 0 3px rgba(var(--profit-rgb, 34, 197, 94), 0.2);
}
.acct-name[data-v-cdc637f2] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-badge[data-v-cdc637f2] {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.85;
}
.acct-mini[data-v-cdc637f2] {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-fast, 0.15s), background var(--dur-fast, 0.15s);
}
.acct-mini[data-v-cdc637f2]:hover { opacity: 1; background: rgba(var(--accent-rgb, 90, 120, 255), 0.14);
}
.acct-mini.ok[data-v-cdc637f2] { color: var(--profit, #22c55e);
}
.acct-mini.rename[data-v-cdc637f2] { margin-right: 4px;
}
.acct-edit[data-v-cdc637f2] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 4px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg-2, var(--bg));
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm, 6px);
  outline: none;
}
.acct-status[data-v-cdc637f2],
.acct-err[data-v-cdc637f2] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-size: 0.75rem;
}
.acct-status[data-v-cdc637f2] { color: var(--text); opacity: 0.8;
}
.acct-err[data-v-cdc637f2] { color: var(--loss, #ef4444);
}
.acct-spin[data-v-cdc637f2] {
  width: 12px; height: 12px;
  border: 2px solid rgba(var(--accent-rgb, 90, 120, 255), 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: acct-spin-cdc637f2 0.7s linear infinite;
}
@keyframes acct-spin-cdc637f2 {
to { transform: rotate(360deg);
}
}

.changelog-version {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.changelog-version:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.changelog-version h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}
.changelog-section {
  margin-bottom: 1.5rem;
}
.changelog-section:last-child {
  margin-bottom: 0;
}
.changelog-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.changelog-badge.new { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.changelog-badge.update { background: rgba(var(--accent-rgb), 0.15); color: var(--accent);
}
.changelog-badge.fix { background: rgba(245, 158, 11, 0.15); color: #f59e0b;
}
.changelog-badge.info { background: rgba(96, 165, 250, 0.15); color: #60a5fa;
}
.changelog-badge.beta {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.changelog-section h4 {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.changelog-section ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
}
.changelog-section li {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.changelog-section li:last-child {
  margin-bottom: 0;
}
.changelog-section .feature-description {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.changelog-section .example-block {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}
.changelog-section .example-block strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--accent);
}
.changelog-section .example-block ul {
  margin: 0;
  padding-left: 1rem;
}
.changelog-section .example-block li {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

/* "Learn more →" link that jumps to the matching help-docs topic. */
.changelog-section .changelog-doc-link {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.changelog-section .changelog-doc-link:hover,
.changelog-section .changelog-doc-link:focus-visible {
  border-bottom-color: var(--accent);
  outline: none;
}

.app-layout[data-v-d97bb756] {
  display: flex;
  min-height: 100vh;
  /* Sit above the fixed .bg-orbs (z-index 0). The canvas color comes from
     <body> (var(--bg)); the main content area is transparent so the orbs
     glow through behind page panels. */
  position: relative;
  z-index: 1;
}

/* Mobile header - hidden on desktop */
.mobile-header[data-v-d97bb756] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--bg-2);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  align-items: center;
  padding: 0 1rem;
}
.hamburger-btn[data-v-d97bb756] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger-line[data-v-d97bb756] {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.brand-mobile[data-v-d97bb756] {
  padding: 0;
  margin-left: 0.85rem;
  gap: 9px;
}
.brand-mobile .brand-mark[data-v-d97bb756] {
  width: 30px;
  height: 30px;
}
.brand-mobile .brand-name[data-v-d97bb756] {
  font-size: 14px;
}

/* Sidebar backdrop - hidden on desktop */
.sidebar-backdrop[data-v-d97bb756] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.sidebar-backdrop.open[data-v-d97bb756] {
  opacity: 1;
  visibility: visible;
}
.sidebar[data-v-d97bb756] {
  width: var(--sb);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 2;
}

/* Brand mark (small bull glyph + wordmark) */
.brand[data-v-d97bb756] {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 1.1rem 16px;
  text-decoration: none;
}
.brand-mark[data-v-d97bb756] {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.14);
}
.brand-bull[data-v-d97bb756] { display: block;
}
.brand-name[data-v-d97bb756] {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--text);
}
.brand-name span[data-v-d97bb756] {
  color: var(--text-mute);
  font-weight: 500;
}
.sidebar-nav[data-v-d97bb756] {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.sidebar-footer[data-v-d97bb756] {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.6rem;
}
.footer-item[data-v-d97bb756] {
  display: inline-flex;
  gap: 0.25rem;
}
.footer-label[data-v-d97bb756] {
  color: var(--text-mute);
}
.footer-val[data-v-d97bb756] {
  color: var(--accent);
}
.changelog-link[data-v-d97bb756] {
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.changelog-link[data-v-d97bb756]:hover {
  color: var(--accent);
}
.changelog-overlay[data-v-d97bb756] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.changelog-modal[data-v-d97bb756] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.changelog-close-x[data-v-d97bb756] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.changelog-close-x[data-v-d97bb756]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.changelog-title[data-v-d97bb756] {
  margin: 0;
  padding: 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid var(--border);
}
.changelog-content[data-v-d97bb756] {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.changelog-footer[data-v-d97bb756] {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.changelog-close-btn[data-v-d97bb756] {
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.changelog-close-btn[data-v-d97bb756]:hover {
  background: var(--accent-2);
}
.nav-bottom-group[data-v-d97bb756] {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
}
.nav-group[data-v-d97bb756] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.85rem;
}
.nav-group-label[data-v-d97bb756] {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--display);
  font-weight: 600;
  padding: 0 1.5rem 0.4rem;
}
.nav-item[data-v-d97bb756] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  margin: 0 0.6rem;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: background-color 0.16s, color 0.16s;
}
.nav-item[data-v-d97bb756]:hover {
  background-color: var(--panel-2);
  color: var(--text);
}
.nav-item.router-link-active[data-v-d97bb756] {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03));
  color: var(--text);
}
.nav-item.router-link-active[data-v-d97bb756]::before {
  content: '';
  position: absolute;
  left: -0.6rem;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: var(--glow);
}
.nav-icon[data-v-d97bb756] {
  flex: none;
  color: inherit;
}
.nav-item.router-link-active .nav-icon[data-v-d97bb756] {
  color: var(--accent);
}
.nav-badge[data-v-d97bb756] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.35rem;
  background: var(--accent);
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-left: auto;
}
.new-badge[data-v-d97bb756] {
  font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  background: rgba(var(--cat-blue-rgb), 0.2);
  border: 1px solid rgba(var(--cat-blue-rgb), 0.4);
  border-radius: 4px;
  color: var(--cat-blue);
  font-weight: 700;
  letter-spacing: 0.05em;
  /* Float over the empty right side so it never shrinks the label and
     forces it to wrap to a second line. nav-item is position: relative. */
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.beta-badge[data-v-d97bb756] {
  font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  background: rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.05em;
  /* Float (see .new-badge) so the label stays on one line. */
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.maintenance-badge[data-v-d97bb756] {
  font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  /* Theme-independent amber (like --paper) so it always reads as "under
     maintenance" regardless of the active accent theme. */
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 4px;
  color: #fbbf24;
  font-weight: 700;
  letter-spacing: 0.05em;
  /* Float (see .new-badge) so the label stays on one line. */
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.main-content[data-v-d97bb756] {
  flex: 1;
  min-width: 0;
  padding: 0 2rem 2rem 2rem;
  overflow-y: auto;
  /* Transparent so the ambient orbs glow through behind page panels. */
  background-color: transparent;
}
.page-content[data-v-d97bb756] {
  padding-top: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}
.page-content--wide[data-v-d97bb756] {
  max-width: none;
}

/* Route change transition — a barely-there fade + lift (transform/opacity only,
   GPU-friendly). Enter-only by design: the incoming page fades in as it mounts,
   and the outgoing page is removed immediately. We deliberately do NOT use
   `mode="out-in"` or a leave transition — that would gate the new page's mount
   on the old page's leave finishing, which can deadlock into a persistent blank
   view under interrupted/rapid navigation or a rejected lazy-chunk import.
   The global [data-animations='off'] pref and reduced-motion both disable it. */
.page-enter-active[data-v-d97bb756] {
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.page-enter-from[data-v-d97bb756] {
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
.page-enter-active[data-v-d97bb756] {
    transition: none;
}
.page-enter-from[data-v-d97bb756] {
    transform: none;
}
}

/* Mobile responsive styles */
@media (max-width: 768px) {
.mobile-header[data-v-d97bb756] {
    display: flex;
}
.sidebar-backdrop[data-v-d97bb756] {
    display: block;
}
.sidebar[data-v-d97bb756] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.sidebar.open[data-v-d97bb756] {
    transform: translateX(0);
}
.main-content[data-v-d97bb756] {
    padding: 0 1rem 1rem 1rem;
    width: 100%;
}
}

/* Loading state */
.loading-container[data-v-d97bb756] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
}
.loading-spinner[data-v-d97bb756] {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(var(--accent-rgb), 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-d97bb756 0.8s linear infinite;
}
@keyframes spin-d97bb756 {
to {
    transform: rotate(360deg);
}
}

/* Update available banner */
.update-banner[data-v-d97bb756] {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(var(--accent-rgb), 0.95);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 9999;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.update-refresh-btn[data-v-d97bb756] {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.update-refresh-btn[data-v-d97bb756]:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Session warning toast */
.session-warning[data-v-d97bb756] {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(245, 158, 11, 0.95);
  color: #000;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 9999;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.warning-dismiss[data-v-d97bb756] {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: #000;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.warning-dismiss[data-v-d97bb756]:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Logout button */
.logout-btn[data-v-d97bb756] {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: background-color 0.2s, border-color 0.2s;
}
.logout-btn[data-v-d97bb756]:hover {
  background: var(--border-strong);
  border-color: var(--accent);
}
.logout-icon[data-v-d97bb756] {
  font-size: 1.25rem;
  color: var(--text-dim);
  transition: color 0.2s;
  line-height: 1;
}
.logout-btn:hover .logout-icon[data-v-d97bb756] {
  color: #fff;
}
.gs-help-btn[data-v-d97bb756] {
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.gs-help-btn[data-v-d97bb756]:hover {
  background: rgba(var(--accent-rgb), 0.22);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Bot Active sidebar card ---- */
.bot-card[data-v-d97bb756] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0.6rem 0.5rem;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
}
.bot-card.offline[data-v-d97bb756] { opacity: 0.85;
}
.bot-dot[data-v-d97bb756] {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--profit); position: relative; flex: none;
}
.bot-dot[data-v-d97bb756]::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--profit); opacity: 0.5; animation: rd-ping 1.8s ease-out infinite;
}
.bot-dot.off[data-v-d97bb756] { background: var(--text-mute);
}
.bot-dot.off[data-v-d97bb756]::after { display: none;
}
.bot-title[data-v-d97bb756] { font-size: 12.5px; font-weight: 600; color: var(--text);
}
.bot-sub[data-v-d97bb756] { font-size: 11px; color: var(--text-mute); font-family: var(--mono);
}

/* ---- live position ticker ---- */
.gs-ticker[data-v-d97bb756] {
  overflow: hidden; height: 26px; display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gs-ticker-track[data-v-d97bb756] {
  display: flex; gap: 22px; white-space: nowrap; padding-left: 14px;
  animation: gs-scrollx-d97bb756 40s linear infinite; will-change: transform;
}
.gs-ticker:hover .gs-ticker-track[data-v-d97bb756] { animation-play-state: paused;
}
@keyframes gs-scrollx-d97bb756 {
from { transform: translateX(0);
}
to { transform: translateX(-50%);
}
}
.gs-tk[data-v-d97bb756] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px;
}
.gs-tk b[data-v-d97bb756] { color: var(--text); font-weight: 600;
}
.gs-tk-pct.up[data-v-d97bb756] { color: var(--profit);
}
.gs-tk-pct.dn[data-v-d97bb756] { color: var(--loss);
}

/* ---- header icon buttons (search / bell) ---- */
.gs-icon-btn[data-v-d97bb756] {
  position: relative; width: 28px; height: 28px; padding: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: .15s; flex: none;
}
.gs-icon-btn[data-v-d97bb756]:hover { color: var(--text); border-color: var(--border-strong);
}
.gs-bell-wrap[data-v-d97bb756] { position: relative; display: inline-flex;
}
.gs-bell-badge[data-v-d97bb756] {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  font-size: 9px; font-weight: 700; display: grid; place-items: center; font-family: var(--sans);
}
.gs-notif-pop[data-v-d97bb756] {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-height: 380px; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg); z-index: 61;
}
.gs-notif-head[data-v-d97bb756] {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 13px;
  border-bottom: 1px solid var(--border); font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--text);
}
.gs-notif-clear[data-v-d97bb756] { background: none; border: none; color: var(--text-mute); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.gs-notif-clear[data-v-d97bb756]:hover { color: var(--loss);
}
.gs-notif-empty[data-v-d97bb756] { padding: 24px 13px; text-align: center; color: var(--text-mute); font-size: 12.5px;
}
.gs-notif-list[data-v-d97bb756] { list-style: none; margin: 0; padding: 4px;
}
.gs-notif-item[data-v-d97bb756] { display: flex; align-items: flex-start; gap: 9px; padding: 9px; border-radius: 8px;
}
.gs-notif-item[data-v-d97bb756]:hover { background: var(--panel-2);
}
.gs-notif-dot[data-v-d97bb756] { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none;
}
.gs-notif-item.success .gs-notif-dot[data-v-d97bb756] { background: var(--profit);
}
.gs-notif-item.error .gs-notif-dot[data-v-d97bb756] { background: var(--loss);
}
.gs-notif-body[data-v-d97bb756] { flex: 1; min-width: 0;
}
.gs-notif-title[data-v-d97bb756] { font-size: 12.5px; font-weight: 600; color: var(--text);
}
.gs-notif-sub[data-v-d97bb756] { font-size: 11.5px; color: var(--text-mute); margin-top: 1px;
}
.gs-notif-time[data-v-d97bb756] { font-size: 10px; color: var(--text-mute); font-family: var(--mono); white-space: nowrap; flex: none;
}
.gs-notif-x[data-v-d97bb756] { flex: none; margin-top: -1px; padding: 0 2px; background: none; border: none; color: var(--text-mute); font-size: 15px; line-height: 1; cursor: pointer; opacity: .55; transition: opacity .15s, color .15s;
}
.gs-notif-item:hover .gs-notif-x[data-v-d97bb756] { opacity: 1;
}
.gs-notif-x[data-v-d97bb756]:hover { color: var(--text);
}

/* ---- global search palette (teleported; scoped data-v attr still applies) ---- */
.rd-search-scrim[data-v-d97bb756] {
  position: fixed; inset: 0; background: rgba(3, 6, 12, 0.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 9998;
}
.rd-search[data-v-d97bb756] {
  width: 100%; max-width: 560px; background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-xl); overflow: hidden;
}
.rd-search-bar[data-v-d97bb756] { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-mute);
}
.rd-search-input[data-v-d97bb756] { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 15px;
}
.rd-search-input[data-v-d97bb756]::placeholder { color: var(--text-mute);
}
.rd-search-bar kbd[data-v-d97bb756] { font-family: var(--mono); font-size: 11px; color: var(--text-mute); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.rd-search-results[data-v-d97bb756] { max-height: 50vh; overflow-y: auto; padding: 6px;
}
.rd-search-empty[data-v-d97bb756] { padding: 22px; text-align: center; color: var(--text-mute); font-size: 13px;
}
.rd-search-row[data-v-d97bb756] { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--text);
}
.rd-search-row[data-v-d97bb756]:hover { background: var(--panel-2);
}
.rd-search-kind[data-v-d97bb756] { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-mute); background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; min-width: 62px; text-align: center;
}
.rd-search-kind.kind-page[data-v-d97bb756] { color: var(--accent);
}
.rd-search-kind.kind-strategy[data-v-d97bb756] { color: var(--profit);
}
.rd-search-kind.kind-symbol[data-v-d97bb756] { color: var(--text-dim);
}
.rd-search-label[data-v-d97bb756] { font-size: 13.5px; font-weight: 500;
}

/* Global Trading Stats Banner */
.global-stats-banner[data-v-d97bb756] {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  margin: 0 -2rem 0 -2rem;
}

/* Paper-trading mode treatment — pink tint on the entire stats banner +
   a label strip across the top. Admin-only via features.paperBroker. */
.global-stats-banner.paper-mode[data-v-d97bb756] {
  background: linear-gradient(180deg, rgba(var(--paper-rgb), 0.18), rgba(var(--paper-rgb), 0.08));
  border-bottom-color: rgba(var(--paper-rgb), 0.45);
}
.paper-mode-label[data-v-d97bb756] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  background: rgba(var(--paper-rgb), 0.25);
  color: #fce7f3;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.4);
}
.paper-mode-icon[data-v-d97bb756] {
  font-size: 0.85rem;
}
.gs-row[data-v-d97bb756] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 1rem;
}
.gs-col[data-v-d97bb756] {
  display: flex;
  align-items: center;
}
.gs-col-left[data-v-d97bb756] {
  justify-content: flex-start;
}
.gs-col-center[data-v-d97bb756] {
  justify-content: center;
  gap: 1rem;
}
.gs-col-right[data-v-d97bb756] {
  justify-content: flex-end;
  gap: 0.5rem;
}
.gs-view-as-row[data-v-d97bb756] {
  border-top: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 0.35rem 1rem;
}
.gs-view-as-label[data-v-d97bb756] {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}
.gs-view-as[data-v-d97bb756] {
  padding: 0.25rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
}
.stats-group[data-v-d97bb756] {
  display: flex;
  gap: 1rem;
}
.stats-divider[data-v-d97bb756] {
  width: 1px;
  height: 28px;
  background: var(--border);
}
.gs-stat[data-v-d97bb756] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.gs-label[data-v-d97bb756] {
  font-size: 0.65rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.gs-value[data-v-d97bb756] {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.gs-value.positive[data-v-d97bb756] {
  color: var(--profit);
}
.gs-value.negative[data-v-d97bb756] {
  color: var(--loss);
}
.gs-win[data-v-d97bb756] {
  color: var(--profit);
}
.gs-loss[data-v-d97bb756] {
  color: var(--loss);
}
.gs-flatten-btn[data-v-d97bb756] {
  padding: 0.3rem 0.75rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
  border-radius: 4px;
  color: var(--loss);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.gs-flatten-btn[data-v-d97bb756]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.25);
  border-color: var(--loss);
}
.gs-flatten-btn[data-v-d97bb756]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.gs-flatten-btn .btn-spinner[data-v-d97bb756] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--loss-rgb), 0.3);
  border-top-color: var(--loss);
  border-radius: 50%;
  animation: spin-d97bb756 0.8s linear infinite;
}

/* Flatten Modal */
.modal-overlay[data-v-d97bb756] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.flatten-modal[data-v-d97bb756] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 480px;
  position: relative;
}
.modal-close-x[data-v-d97bb756] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}
.modal-close-x[data-v-d97bb756]:hover {
  color: #fff;
}
.modal-title[data-v-d97bb756] {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem 0;
}
.modal-body[data-v-d97bb756] {
  margin-bottom: 1.25rem;
}
.flatten-warning-banner[data-v-d97bb756] {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
}
.flatten-warning-banner .warning-icon[data-v-d97bb756] {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.flatten-warning[data-v-d97bb756] {
  color: var(--loss);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}
.flatten-caution[data-v-d97bb756] {
  color: var(--text-mute);
  font-size: 0.8rem;
  margin: 0.25rem 0 0 0;
}
.flatten-errors[data-v-d97bb756] {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(var(--loss-rgb), 0.1);
  border-radius: 8px;
}
.flatten-errors h4[data-v-d97bb756] {
  color: var(--loss);
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
}
.flatten-errors ul[data-v-d97bb756] {
  margin: 0;
  padding-left: 1.25rem;
}
.flatten-errors li[data-v-d97bb756] {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.modal-footer[data-v-d97bb756] {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.btn-cancel[data-v-d97bb756] {
  padding: 0.5rem 1rem;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-cancel[data-v-d97bb756]:hover:not(:disabled) {
  background: var(--border-strong);
  color: #fff;
}
.btn-flatten[data-v-d97bb756] {
  padding: 0.5rem 1rem;
  background: var(--loss);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.btn-flatten[data-v-d97bb756]:hover:not(:disabled) {
  background: var(--loss);
}
.btn-flatten[data-v-d97bb756]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-flatten .btn-spinner[data-v-d97bb756] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-d97bb756 0.8s linear infinite;
}

/* Toast */
.toast[data-v-d97bb756] {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10000;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.toast.success[data-v-d97bb756] {
  background: rgba(var(--profit-rgb), 0.95);
  color: #fff;
}
.toast.error[data-v-d97bb756] {
  background: rgba(var(--loss-rgb), 0.95);
  color: #fff;
}
.toast-message[data-v-d97bb756] {
  flex: 1;
}
.toast-action[data-v-d97bb756] {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 0.25rem;
}
.toast-action[data-v-d97bb756]:hover {
  text-decoration: none;
}
.toast-close[data-v-d97bb756] {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.toast-close[data-v-d97bb756]:hover {
  color: #fff;
}
.toast-enter-active[data-v-d97bb756],
.toast-leave-active[data-v-d97bb756] {
  transition: all 0.3s ease;
}
.toast-enter-from[data-v-d97bb756],
.toast-leave-to[data-v-d97bb756] {
  opacity: 0;
  transform: translateY(1rem);
}

/* Mobile responsive for global banner */
@media (max-width: 768px) {
.global-stats-banner[data-v-d97bb756] {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 -1rem 0 -1rem;
    padding-top: calc(56px + 0.5rem);  /* Account for mobile header */
}
.stats-group[data-v-d97bb756] {
    gap: 0.75rem;
}
.stats-divider[data-v-d97bb756] {
    display: none;
}
.gs-flatten-btn[data-v-d97bb756] {
    width: 100%;
    justify-content: center;
    padding: 0.4rem;
}
}



/* ============================================================
   StaxInvesting user-portal — Theme foundation
   "Web3 trading terminal" design refresh.

   This file is the single source of truth for the design's
   CSS-variable contract. Every component's scoped styles read
   these vars (var(--accent), var(--profit), var(--panel)…) so a
   theme is swapped by toggling ONE attribute: data-theme on
   <html>. Heritage (brand gold) is the :root default, so the
   look is correct on first paint with zero JS. useTheme.ts only
   flips data-theme + persists the choice.

   Fonts are @import'ed here (bundled CSS), NOT via an index.html
   <link>: this app loads as a Module-Federation remote inside
   ATS-Frontend, where index.html's <head> does not apply — same
   reason images must be ?inline data-URLs.
   ============================================================ */
/* ------------------------------------------------------------
   Shared tokens (theme-independent) + DEFAULT palette (Heritage)
   ------------------------------------------------------------ */
:root {
  /* ---- Fonts ---- */
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (codifies the sizes the rd-* primitives already use;
     new/touched surfaces reference these instead of magic numbers) ---- */
  --fs-eyebrow: 11px;   /* uppercase kicker */
  --fs-label: 12.5px;   /* small labels, toolbar text */
  --fs-body: 13px;      /* body / table text */
  --fs-value: 21px;     /* stat-cell value */
  --fs-hero: 25px;      /* metric hero number */
  --fs-title: 27px;     /* page title */

  /* ---- Layout ---- */
  --sb: 248px;       /* sidebar width */
  --topbar: 60px;    /* header height */

  /* ---- Paper-trading pink (theme-independent; matches design tc-paper-edge) ---- */
  --paper: #EC4899;
  --paper-rgb: 236, 72, 153;

  /* ---- Categorical (non-semantic) accents — theme-independent, pre-desaturated
     so they read as muted labels on the dark canvas (not candy) and stay stable
     across all 4 accent themes, like --paper. Used by the type pills / badges. ---- */
  --cat-blue: #5E8FD0;    /* debit spread / "NEW" / live broker */
  --cat-blue-rgb: 94, 143, 208;
  --cat-violet: #B085E0;  /* iron condor / butterfly */
  --cat-violet-rgb: 176, 133, 224;
  --cat-amber: #E0A030;   /* futures / Tradovate broker pill */
  --cat-amber-rgb: 224, 160, 48;

  /* ---- Spacing (4px base ramp; adopt on touched surfaces, not a mass migration) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 48px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Elevation (tuned for dark canvas) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Z-index ladder ---- */
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* ============================================================
     PALETTE — default = Heritage (brand gold + emerald)
     Override blocks below swap these for the other 3 themes.
     ============================================================ */
  --bg: #080D17;
  --bg-2: #0B1220;
  --orb-1: rgba(245, 158, 11, 0.14);
  --orb-2: rgba(16, 185, 129, 0.11);
  --grid-line: rgba(160, 180, 210, 0.05);
  --panel: rgba(255, 255, 255, 0.022);
  --panel-2: rgba(255, 255, 255, 0.04);
  --panel-solid: #0F1726;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #EAF0F8;
  --text-dim: #A7B6CC;
  --text-mute: #65748C;
  --accent: #FBBF24;
  --accent-2: #F59E0B;
  --accent-rgb: 251, 191, 36;
  --accent-ink: #1A1204;
  --glow: 0 0 22px rgba(251, 191, 36, 0.4);
  --profit: #34D399;
  --profit-rgb: 52, 211, 153;
  --loss: #F87171;
  --loss-rgb: 248, 113, 113;
}
/* ---- Quantum — electric cyan ---- */
:root[data-theme='quantum'] {
  --bg: #060A12;
  --bg-2: #0A1019;
  --orb-1: rgba(34, 211, 238, 0.16);
  --orb-2: rgba(59, 130, 246, 0.13);
  --grid-line: rgba(120, 190, 230, 0.05);
  --panel: rgba(255, 255, 255, 0.022);
  --panel-2: rgba(255, 255, 255, 0.04);
  --panel-solid: #0C131F;
  --border: rgba(146, 194, 235, 0.10);
  --border-strong: rgba(146, 194, 235, 0.20);
  --text: #EAF2FB;
  --text-dim: #9FB3CC;
  --text-mute: #5F728C;
  --accent: #22D3EE;
  --accent-2: #3B82F6;
  --accent-rgb: 34, 211, 238;
  --accent-ink: #04141A;
  --glow: 0 0 24px rgba(34, 211, 238, 0.45);
  --profit: #34D399;
  --profit-rgb: 52, 211, 153;
  --loss: #FB7185;
  --loss-rgb: 251, 113, 133;
}
/* ---- Plasma — violet · magenta ---- */
:root[data-theme='plasma'] {
  --bg: #09060F;
  --bg-2: #0E0A18;
  --orb-1: rgba(168, 85, 247, 0.18);
  --orb-2: rgba(236, 72, 153, 0.14);
  --grid-line: rgba(190, 150, 230, 0.05);
  --panel: rgba(255, 255, 255, 0.022);
  --panel-2: rgba(255, 255, 255, 0.045);
  --panel-solid: #130C1F;
  --border: rgba(196, 160, 240, 0.11);
  --border-strong: rgba(196, 160, 240, 0.22);
  --text: #F2ECFB;
  --text-dim: #B6A6CC;
  --text-mute: #6E5F86;
  --accent: #B266FF;
  --accent-2: #EC4899;
  --accent-rgb: 178, 102, 255;
  --accent-ink: #120420;
  --glow: 0 0 24px rgba(178, 102, 255, 0.5);
  --profit: #3DDC97;
  --profit-rgb: 61, 220, 151;
  --loss: #FB5C8E;
  --loss-rgb: 251, 92, 142;
}
/* ---- Voltage — neon terminal ---- */
:root[data-theme='voltage'] {
  --bg: #070A07;
  --bg-2: #0B100B;
  --orb-1: rgba(163, 230, 53, 0.15);
  --orb-2: rgba(34, 211, 238, 0.10);
  --grid-line: rgba(170, 210, 140, 0.05);
  --panel: rgba(255, 255, 255, 0.02);
  --panel-2: rgba(255, 255, 255, 0.04);
  --panel-solid: #0D140C;
  --border: rgba(180, 220, 150, 0.11);
  --border-strong: rgba(180, 220, 150, 0.22);
  --text: #EFF6E9;
  --text-dim: #AEC1A2;
  --text-mute: #6A7B5F;
  --accent: #B6F23D;
  --accent-2: #22D3EE;
  --accent-rgb: 182, 242, 61;
  --accent-ink: #101A04;
  --glow: 0 0 24px rgba(182, 242, 61, 0.42);
  --profit: #5EE08A;
  --profit-rgb: 94, 224, 138;
  --loss: #FF6B6B;
  --loss-rgb: 255, 107, 107;
}
/* ---- Heritage — explicit block (so switching back from another
       theme is unambiguous even if :root defaults ever change) ---- */
:root[data-theme='heritage'] {
  --bg: #080D17;
  --bg-2: #0B1220;
  --orb-1: rgba(245, 158, 11, 0.14);
  --orb-2: rgba(16, 185, 129, 0.11);
  --grid-line: rgba(160, 180, 210, 0.05);
  --panel: rgba(255, 255, 255, 0.022);
  --panel-2: rgba(255, 255, 255, 0.04);
  --panel-solid: #0F1726;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #EAF0F8;
  --text-dim: #A7B6CC;
  --text-mute: #65748C;
  --accent: #FBBF24;
  --accent-2: #F59E0B;
  --accent-rgb: 251, 191, 36;
  --accent-ink: #1A1204;
  --glow: 0 0 22px rgba(251, 191, 36, 0.4);
  --profit: #34D399;
  --profit-rgb: 52, 211, 153;
  --loss: #F87171;
  --loss-rgb: 248, 113, 113;
}
/* ------------------------------------------------------------
   Global base — canvas, fonts, selection, scrollbars
   ------------------------------------------------------------ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-slow) var(--ease-out);
}
::selection {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--text);
}
/* Tabular-numerics helper for prices, P/L, tickers */
.stx-numeric,
.mono {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
}
/* Subtle dark scrollbars (webkit) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-mute);
  border: 3px solid transparent;
  background-clip: padding-box;
}
/* ------------------------------------------------------------
   Ambient background orbs — rendered once in the app shell as
   <div class="bg-orbs" aria-hidden="true"></div>
   ------------------------------------------------------------ */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 420px at 14% -6%, var(--orb-1), transparent 60%),
    radial-gradient(720px 520px at 96% 4%, var(--orb-2), transparent 62%),
    radial-gradient(900px 700px at 60% 120%, var(--orb-1), transparent 70%);
  opacity: 0.9;
  transition: background var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  body,
  .bg-orbs {
    transition: none;
  }
}
/* ------------------------------------------------------------
   Display preferences (useUiPrefs) — applied as attributes on <html>
   ------------------------------------------------------------ */
/* Compact density: scale rem-based sizing down slightly. */
:root[data-density='compact'] {
  font-size: 15px;
}
/* Animations off: kill transitions/animations app-wide. */
:root[data-animations='off'] *,
:root[data-animations='off'] *::before,
:root[data-animations='off'] *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
/* ============================================================
   StaxInvesting user-portal — Redesign shared component vocabulary
   Ported from the claude.ai design prototype (redesign/index.html).
   Already var-based (same contract as theme.css), so it's drop-in.

   All classes are prefixed `rd-` to guarantee NO collision with the
   app's existing (scoped) class names. Page templates opt in by using
   the `rd-*` class; the design prototype's class `foo` maps to `rd-foo`.

   This file holds only the CROSS-PAGE primitives (page-head, panels,
   metrics, stat strips, tables, segmented controls, buttons, pills,
   toggles, selects/inputs, bars). Page-specific layouts (calendar
   heatmap, leaderboard podium, killswitch/trailing viz, trade-card
   taxonomy, etc.) live in each page's scoped <style>.
   ============================================================ */

/* ---------- page header ---------- */
.rd-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rd-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; font-family: var(--display); }
.rd-page-title { font-family: var(--display); font-size: 27px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--text); }
.rd-page-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; font-family: var(--mono); }
.rd-page-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* equity pill (header-right summary) */
.rd-equity-pill { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 11px 18px; }
.rd-eq-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.rd-eq-val { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -.01em; margin-top: 2px; }
.rd-eq-chg { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--profit); background: rgba(var(--profit-rgb), 0.12); padding: 5px 9px; border-radius: 8px; }

/* ---------- toolbar / segmented / buttons ---------- */
.rd-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.rd-seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.rd-seg-btn { background: none; border: none; color: var(--text-mute); font-family: var(--display); font-weight: 600; font-size: 12.5px; padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: .16s; }
.rd-seg-btn:hover { color: var(--text-dim); }
.rd-seg-btn.on, .rd-seg-btn.active { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.6)); color: var(--accent-ink); box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3); }
.rd-seg-sm .rd-seg-btn { padding: 5px 10px; font-size: 11.5px; }

.rd-tb-ghost, .rd-tb-solid { display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; font-size: 12.5px; font-weight: 600; font-family: var(--display); padding: 8px 13px; cursor: pointer; transition: .16s; }
.rd-tb-ghost { background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); }
.rd-tb-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.rd-tb-solid { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: var(--accent-ink); box-shadow: var(--glow); }
.rd-tb-solid:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rd-tb-ghost.sm, .rd-tb-solid.sm { font-size: 11.5px; padding: 6px 11px; }
.rd-tb-ghost:disabled, .rd-tb-solid:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- metric cards ---------- */
.rd-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rd-metric { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px 12px; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: .2s; animation: rd-rise .6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rd-metric::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent); opacity: 0; transition: .2s; }
.rd-metric:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); }
.rd-metric:hover::before { opacity: 1; }
.rd-metric.hero { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), var(--panel) 55%); border-color: rgba(var(--accent-rgb), 0.25); }
.rd-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.rd-metric-label { font-size: 11.5px; color: var(--text-mute); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.rd-metric-delta { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.rd-metric-val { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--text); }

/* ---------- grid + panels ---------- */
.rd-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 14px; }
.rd-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0; overflow: hidden; transition: .2s; }
.rd-panel:hover { border-color: var(--border-strong); }
.rd-panel-pad { padding: 0 18px 18px; }
.rd-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.rd-panel-title { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 14.5px; font-weight: 600; margin: 0; color: var(--text); }
.rd-panel-tick { width: 3px; height: 14px; border-radius: 3px; background: var(--accent); box-shadow: var(--glow); flex: none; }
.rd-panel-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 4px; font-family: var(--mono); }
.rd-axis-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--text-mute); margin-top: 8px; }
.rd-chip-up { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--profit); background: rgba(var(--profit-rgb), 0.12); padding: 5px 9px; border-radius: 8px; }
.rd-chip-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); font-family: var(--display); }
.rd-mini-link { background: none; border: none; color: var(--text-mute); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; font-family: var(--display); }
.rd-mini-link:hover { color: var(--accent); }

/* ---------- stat strip ---------- */
.rd-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-bottom: 14px; }
.rd-stat-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: .18s; }
.rd-stat-cell:hover { border-color: var(--border-strong); }
.rd-stat-cell-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); font-weight: 600; margin-bottom: 7px; }
.rd-stat-cell-val { display: block; font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--text); }
.rd-stat-cell-delta { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; margin-top: 6px; }

/* ---------- tables ---------- */
.rd-rt-wrap { overflow-x: auto; }
.rd-rt { width: 100%; border-collapse: collapse; font-size: 13px; }
.rd-rt th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 600; padding: 8px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rd-rt th.r { text-align: right; }
.rd-rt td { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.rd-rt tr:last-child td { border-bottom: none; }
.rd-rt tbody tr { transition: .14s; }
.rd-rt tbody tr:hover { background: var(--panel-2); }
.rd-rt td.r { text-align: right; }
.rd-rt-wide { min-width: 760px; }
.rd-rt-sym { font-family: var(--display); font-weight: 700; color: var(--text); margin-right: 7px; }

/* ---------- selects / inputs ---------- */
.rd-select-wrap { position: relative; display: inline-flex; align-items: center; }
.rd-select-wrap svg { position: absolute; right: 9px; pointer-events: none; color: var(--text-mute); }
.rd-ui-select { appearance: none; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); font-family: var(--display); font-weight: 600; font-size: 12.5px; padding: 8px 30px 8px 13px; border-radius: 10px; cursor: pointer; }
.rd-ui-select:hover { border-color: var(--border-strong); color: var(--text); }
.rd-ui-input { background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 9px 13px; border-radius: 10px; width: 100%; }
.rd-ui-input:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); }

/* ---------- pills / bars / toggle ---------- */
.rd-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; font-family: var(--sans); }
.rd-pill-accent { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.rd-pill-profit { background: rgba(var(--profit-rgb), 0.14); color: var(--profit); }
.rd-pill-loss { background: rgba(var(--loss-rgb), 0.14); color: var(--loss); }
.rd-pill-mute { background: var(--panel-2); color: var(--text-dim); }

.rd-ui-bar { width: 100%; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; }
.rd-ui-bar-fill { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }

.rd-toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--border); position: relative; cursor: pointer; transition: .18s; flex: none; padding: 0; }
.rd-toggle.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.rd-toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rd-toggle.on .rd-toggle-knob { left: 18px; }

/* ---------- live dot ---------- */
.rd-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--profit); position: relative; flex: none; }
.rd-pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: .5; animation: rd-ping 1.8s ease-out infinite; }
.rd-pulse-dot.sm { width: 6px; height: 6px; }

/* ---------- helpers ---------- */
.rd-mono { font-family: var(--mono); }
.rd-dim { color: var(--text-mute); }
.rd-up { color: var(--profit); }
.rd-dn { color: var(--loss); }
.rd-empty { padding: 26px; text-align: center; color: var(--text-mute); font-size: 13px; background: var(--panel); border: 1px dashed var(--border); border-radius: 14px; }

/* ---------- error state (loss-palette sibling of rd-empty) ---------- */
.rd-error { padding: 26px; text-align: center; color: var(--loss); font-size: 13px; background: rgba(var(--loss-rgb), 0.08); border: 1px solid rgba(var(--loss-rgb), 0.3); border-radius: 14px; }
.rd-error-retry { margin-top: 12px; padding: 7px 14px; background: transparent; border: 1px solid var(--loss); border-radius: 10px; color: var(--loss); font-family: var(--display); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: .16s; }
.rd-error-retry:hover { background: rgba(var(--loss-rgb), 0.12); }

/* ---------- skeleton (loading placeholder; matches card silhouettes) ---------- */
.rd-skel { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.rd-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.06) 50%, transparent 100%); background-size: 200% 100%; animation: rd-shimmer 1.4s ease-in-out infinite; }
.rd-skel-line { background: var(--panel-2); border-radius: 6px; height: 12px; }

/* ---------- animations ---------- */
@keyframes rd-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rd-ping { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes rd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- responsive: collapse 12-col spans ---------- */
@media (max-width: 1180px) {
  .rd-grid-12 > [style*="span 8"], .rd-grid-12 > [style*="span 7"],
  .rd-grid-12 > [style*="span 5"], .rd-grid-12 > [style*="span 4"] { grid-column: span 12 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-metric { animation: none; }
  .rd-skel::after { animation: none; }
}
/* Base element defaults. The theme variable contract + canvas/font
   base live in ./assets/theme.css (imported first). This file only
   carries element resets that read those vars + the P&L flash keyframes. */
:root {
  font-family: var(--sans);
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: var(--text);
  /* Keep the root background dark even before body paints (e.g. below the
     fixed-height sidebar, or during headless-Chrome capture). */
  background-color: var(--bg);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: var(--accent);
  text-decoration: inherit;
}
a:hover {
  color: var(--accent-2);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: var(--panel-solid);
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: var(--accent);
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.card {
  padding: 2em;
}

#app {
  width: 100%;
  min-height: 100vh;
}

/* Tick-based P&L flash animation — applied to any element that displays a
 * live profit/loss value. Paired with the usePnlFlash composable, which
 * adds .pnl-flash-up on an up-tick and .pnl-flash-down on a down-tick.
 * Animation runs three short background pulses (~0.9s total) then ends;
 * the consumer's @animationend handler removes the class so the next
 * tick can re-trigger. Global so every component can use it without
 * duplicating keyframes inside its own scoped style block. */
@keyframes pnlFlashUp {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(var(--profit-rgb), 0.5); }
}
@keyframes pnlFlashDown {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(var(--loss-rgb), 0.5); }
}
.pnl-flash-up   { animation: pnlFlashUp 0.3s ease 3; border-radius: 4px; }
.pnl-flash-down { animation: pnlFlashDown 0.3s ease 3; border-radius: 4px; }

/* The root spans the viewport but must NOT capture clicks — otherwise it would
   swallow every click before it reached the highlighted control underneath.
   Only the interactive pieces (bubble, hub backdrop) re-enable pointer events. */
.tour-root[data-v-59c9c946] {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
.tour-backdrop[data-v-59c9c946] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
  animation: tour-fade-59c9c946 var(--dur-fast, 0.18s) var(--ease-out, ease);
}
/* Hub: block the page so the user picks a flow rather than clicking through. */
.tour-backdrop-block[data-v-59c9c946] { pointer-events: auto;
}

/* Paint-only dim: the huge spread box-shadow darkens everything outside the
   hole without capturing pointer events, so the real control stays clickable. */
.tour-cutout[data-v-59c9c946] {
  position: fixed;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.5);
  transition: all var(--dur-base, 0.3s) var(--ease-out, ease);
}
.tour-flash[data-v-59c9c946] {
  position: fixed;
  box-sizing: border-box;
  pointer-events: none;
  border: 2px solid var(--accent);
  box-shadow: var(--glow);
  transition: all var(--dur-base, 0.3s) var(--ease-out, ease);
  animation: tour-pulse-59c9c946 1.6s var(--ease-out, ease) infinite;
}
@keyframes tour-pulse-59c9c946 {
0%, 100% { box-shadow: var(--glow), 0 0 0 0 rgba(var(--accent-rgb), 0.5);
}
50%      { box-shadow: var(--glow), 0 0 0 10px rgba(var(--accent-rgb), 0);
}
}
@keyframes tour-fade-59c9c946 {
from { opacity: 0;
}
to { opacity: 1;
}
}

/* Reduced-motion / animations-off: static ring + no transition. (theme.css also
   globally kills animation under [data-animations='off'], this is belt+braces.) */
.tour-reduced .tour-flash[data-v-59c9c946] { animation: none;
}
.tour-reduced .tour-cutout[data-v-59c9c946],
.tour-reduced .tour-flash[data-v-59c9c946],
.tour-reduced .tour-backdrop[data-v-59c9c946] { transition: none; animation: none;
}
@media (prefers-reduced-motion: reduce) {
.tour-flash[data-v-59c9c946] { animation: none;
}
.tour-cutout[data-v-59c9c946] { transition: none;
}
}
.tour-bubble[data-v-59c9c946] {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  z-index: 10001;
  pointer-events: auto;
  background: var(--panel-solid);
  color: var(--text);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.5));
  padding: var(--space-5, 20px);
  font-family: var(--sans);
  transition: left var(--dur-base, 0.3s) var(--ease-out, ease), top var(--dur-base, 0.3s) var(--ease-out, ease);
}
.tour-reduced .tour-bubble[data-v-59c9c946] { transition: none;
}
.tour-x[data-v-59c9c946] {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--text-mute);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur-fast, 0.18s), color var(--dur-fast, 0.18s);
}
.tour-x[data-v-59c9c946]:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--text);
}
.tour-step-count[data-v-59c9c946] {
  font-size: var(--fs-eyebrow, 0.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.tour-title[data-v-59c9c946] {
  font-family: var(--display, var(--sans));
  font-size: var(--fs-title, 1.15rem);
  line-height: 1.25;
  margin: 0 26px 8px 0;
  color: var(--text);
}
.tour-title-hub[data-v-59c9c946] { margin-right: 26px;
}
.tour-body[data-v-59c9c946] {
  color: var(--text-dim);
  font-size: var(--fs-body, 0.9rem);
  line-height: 1.5;
}
.tour-body[data-v-59c9c946] p { margin: 0 0 0.55em;
}
.tour-body[data-v-59c9c946] p:last-child { margin-bottom: 0;
}
.tour-body[data-v-59c9c946] strong { color: var(--text); font-weight: 700;
}

/* Subscription-tier max-capital callout */
.tour-tier-callout[data-v-59c9c946] {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--accent-rgb), 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tour-tier-text[data-v-59c9c946] {
  font-size: var(--fs-label, 0.82rem);
  color: var(--text-dim);
  line-height: 1.45;
}
.tour-tier-text strong[data-v-59c9c946] { color: var(--text);
}
.tour-tier-btn[data-v-59c9c946] {
  align-self: flex-start;
  border: none;
  background: var(--accent);
  color: var(--accent-ink, #071018);
  font-size: var(--fs-label, 0.8rem);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: filter var(--dur-fast, 0.18s);
}
.tour-tier-btn[data-v-59c9c946]:hover { filter: brightness(1.06);
}

/* "Learn more" deep-link to the help docs */
.tour-learn[data-v-59c9c946] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-label, 0.8rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast, 0.18s), border-color var(--dur-fast, 0.18s);
}
.tour-learn[data-v-59c9c946]:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
}

/* Waiting-for-target hint */
.tour-waiting[data-v-59c9c946] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text-dim);
  font-size: var(--fs-label, 0.8rem);
}
.tour-waiting-dot[data-v-59c9c946] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: tour-blink-59c9c946 1.1s ease-in-out infinite;
}
.tour-reduced .tour-waiting-dot[data-v-59c9c946] { animation: none;
}
@keyframes tour-blink-59c9c946 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.25;
}
}

/* Overview intro / welcome CTA */
.tour-intro-cta[data-v-59c9c946] {
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
}
.tour-intro-skip[data-v-59c9c946] {
  display: block;
  width: 100%;
  margin-top: 8px;
  text-align: center;
}

/* Hub choice cards */
.tour-choices[data-v-59c9c946] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.tour-choice[data-v-59c9c946] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-2, var(--panel));
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast, 0.18s), background var(--dur-fast, 0.18s), transform var(--dur-fast, 0.18s);
}
.tour-choice[data-v-59c9c946]:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
}
.tour-choice-glyph[data-v-59c9c946] { font-size: 1.3rem; line-height: 1;
}
.tour-choice-text[data-v-59c9c946] { display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.tour-choice-label[data-v-59c9c946] { font-weight: 700; font-size: var(--fs-body, 0.9rem);
}
.tour-choice-blurb[data-v-59c9c946] { font-size: var(--fs-label, 0.78rem); color: var(--text-mute); line-height: 1.35;
}
.tour-choice-arrow[data-v-59c9c946] { color: var(--accent); font-weight: 700;
}

/* Footer */
.tour-foot[data-v-59c9c946] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
}
.tour-foot-right[data-v-59c9c946] { display: flex; align-items: center; gap: 6px;
}
.tour-link[data-v-59c9c946] {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-label, 0.82rem);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: color var(--dur-fast, 0.18s), background var(--dur-fast, 0.18s);
}
.tour-link[data-v-59c9c946]:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.08);
}
.tour-link-subtle[data-v-59c9c946] { color: var(--text-mute);
}
.tour-next[data-v-59c9c946] {
  border: none;
  background: var(--accent);
  color: var(--accent-ink, #071018);
  font-size: var(--fs-body, 0.88rem);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  box-shadow: var(--glow);
  transition: filter var(--dur-fast, 0.18s), transform var(--dur-fast, 0.18s);
}
.tour-next[data-v-59c9c946]:hover { filter: brightness(1.06); transform: translateY(-1px);
}
.tour-next-disabled[data-v-59c9c946] {
  background: var(--panel-2, var(--panel));
  color: var(--text-mute);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.tour-next-disabled[data-v-59c9c946]:hover { filter: none; transform: none;
}
.tour-dismiss-row[data-v-59c9c946] { margin-top: 12px; text-align: center;
}
.tour-dismiss[data-v-59c9c946] {
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: var(--fs-eyebrow, 0.72rem);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
}
.tour-dismiss[data-v-59c9c946]:hover { color: var(--text-dim);
}
.tour-dismiss-note[data-v-59c9c946] {
  color: var(--text-mute);
  font-size: var(--fs-eyebrow, 0.72rem);
  font-style: italic;
}

.docs-overlay[data-v-7207a6ae] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.docs-modal[data-v-7207a6ae] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.docs-header[data-v-7207a6ae] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.docs-drawer-toggle[data-v-7207a6ae] {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  transition: background-color 0.2s, border-color 0.2s;
}
.docs-drawer-toggle[data-v-7207a6ae]:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}
.docs-drawer-toggle .hamburger-line[data-v-7207a6ae] {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-dim);
  border-radius: 1px;
}
.docs-title[data-v-7207a6ae] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.docs-close-x[data-v-7207a6ae] {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.docs-close-x[data-v-7207a6ae]:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.docs-body[data-v-7207a6ae] {
  display: flex;
  flex: 1;
  min-height: 0;
}
.docs-sidenav[data-v-7207a6ae] {
  width: 260px;
  flex-shrink: 0;
  background: #181826;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transition: width 0.2s ease, transform 0.2s ease;
}
.docs-modal.drawer-closed .docs-sidenav[data-v-7207a6ae] {
  width: 0;
  border-right-width: 0;
}
.docs-search[data-v-7207a6ae] {
  position: relative;
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.docs-search-input[data-v-7207a6ae] {
  width: 100%;
  padding: 0.5rem 1.9rem 0.5rem 0.7rem;
  background: #11111a;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #d0d0e0;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.docs-search-input[data-v-7207a6ae]:focus {
  border-color: var(--accent);
  background: #14141f;
}
.docs-search-input[data-v-7207a6ae]::placeholder {
  color: #6b6b80;
}
.docs-search-input[data-v-7207a6ae]::-webkit-search-cancel-button {
  display: none;
}
.docs-search-clear[data-v-7207a6ae] {
  position: absolute;
  right: 1.05rem;
  top: 50%;
  transform: translateY(-30%);
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.docs-search-clear[data-v-7207a6ae]:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.docs-sidenav-empty[data-v-7207a6ae] {
  padding: 1rem;
  margin: 0;
  color: #6b6b80;
  font-size: 0.85rem;
  font-style: italic;
}
.docs-empty-state[data-v-7207a6ae] {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2.25rem;
  color: var(--text-dim);
  text-align: center;
}
.docs-empty-state p[data-v-7207a6ae] {
  margin: 0.5rem 0;
}
.docs-empty-state strong[data-v-7207a6ae] {
  color: #fff;
}
.docs-section-list[data-v-7207a6ae],
.docs-topic-list[data-v-7207a6ae] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.docs-section-list[data-v-7207a6ae] {
  padding: 0.75rem 0;
}
.docs-section-btn[data-v-7207a6ae] {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #d0d0e0;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.docs-section-btn[data-v-7207a6ae]:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: #fff;
}
.docs-section-btn.active[data-v-7207a6ae] {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.12);
  border-left: 3px solid var(--accent);
  padding-left: calc(1rem - 3px);
}
.docs-topic-list[data-v-7207a6ae] {
  padding: 0.15rem 0 0.4rem 0;
}
.docs-topic-btn[data-v-7207a6ae] {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 0.4rem 1rem 0.4rem 1.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.docs-topic-btn[data-v-7207a6ae]:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.docs-topic-btn.active[data-v-7207a6ae] {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.08);
  border-left-color: var(--accent);
}
.docs-topic-btn[data-v-7207a6ae] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.docs-topic-title[data-v-7207a6ae] {
  flex: 1;
  min-width: 0;
}
.docs-topic-new[data-v-7207a6ae] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.docs-new-pill[data-v-7207a6ae] {
  background: #4ade80;
  color: #0b1a10;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  line-height: 1.2;
}
.docs-new-date[data-v-7207a6ae] {
  font-size: 0.7rem;
  color: #4ade80;
  font-weight: 500;
}
.docs-content[data-v-7207a6ae] {
  flex: 1;
  overflow-y: auto;
  background: var(--panel-solid);
  scroll-behavior: smooth;
}
.docs-content-inner[data-v-7207a6ae] {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 2.25rem 4rem;
  color: #d0d0e0;
  line-height: 1.65;
}
.docs-section-heading[data-v-7207a6ae] {
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
}

/* "Recently Added" content-pane directory: a list of links to the real articles. */
.docs-recent-intro[data-v-7207a6ae] {
  margin: -0.75rem 0 1.5rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.docs-recent-list[data-v-7207a6ae] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.docs-recent-item[data-v-7207a6ae] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  width: 100%;
  text-align: left;
  background: #181826;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #d0d0e0;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.docs-recent-item[data-v-7207a6ae]:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--accent);
  color: #fff;
}
.docs-recent-title[data-v-7207a6ae] {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #fff;
}
.docs-recent-meta[data-v-7207a6ae] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.docs-recent-section[data-v-7207a6ae] {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.docs-topic[data-v-7207a6ae] {
  scroll-margin-top: 0.5rem;
  padding-bottom: 1.5rem;
}
.docs-topic[data-v-7207a6ae]:not(:last-child) {
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed var(--border);
}
.docs-topic[data-v-7207a6ae] h2 {
  color: #fff;
  font-size: 1.4rem;
  margin: 1.25rem 0 1rem;
  font-weight: 700;
}
.docs-topic[data-v-7207a6ae] h3 {
  color: #fff;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem;
  font-weight: 600;
}
.docs-topic[data-v-7207a6ae] h4 {
  color: #c8c8d8;
  font-size: 1rem;
  margin: 1rem 0 0.4rem;
  font-weight: 600;
}
.docs-topic[data-v-7207a6ae] p {
  margin: 0.7rem 0;
  color: #d0d0e0;
}
.docs-topic[data-v-7207a6ae] strong {
  color: #fff;
  font-weight: 600;
}
.docs-topic[data-v-7207a6ae] em {
  color: #c0c0d0;
}
.docs-topic[data-v-7207a6ae] .docs-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.docs-topic[data-v-7207a6ae] ul,
.docs-topic[data-v-7207a6ae] ol {
  margin: 0.6rem 0 0.8rem 1.25rem;
  padding: 0;
}
.docs-topic[data-v-7207a6ae] li {
  margin: 0.3rem 0;
}
.docs-topic[data-v-7207a6ae] code {
  background: var(--border);
  color: #ffd479;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'SF Mono', Consolas, Monaco, monospace;
}
.docs-topic[data-v-7207a6ae] table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.9rem;
}
.docs-topic[data-v-7207a6ae] th,
.docs-topic[data-v-7207a6ae] td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.docs-topic[data-v-7207a6ae] th {
  color: #fff;
  background: #181826;
  font-weight: 600;
}
.docs-topic[data-v-7207a6ae] blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 0 6px 6px 0;
  color: #d0d0e0;
}
.docs-topic[data-v-7207a6ae] blockquote p {
  margin: 0.35rem 0;
}
.docs-topic[data-v-7207a6ae] blockquote.callout {
  border-left-width: 3px;
}
.docs-topic[data-v-7207a6ae] .callout-label {
  margin: 0 0 0.25rem 0 !important;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.docs-topic[data-v-7207a6ae] blockquote.callout-tip {
  border-left-color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}
.docs-topic[data-v-7207a6ae] blockquote.callout-tip .callout-label {
  color: #4ade80;
}
.docs-topic[data-v-7207a6ae] blockquote.callout-note {
  border-left-color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}
.docs-topic[data-v-7207a6ae] blockquote.callout-note .callout-label {
  color: #60a5fa;
}
.docs-topic[data-v-7207a6ae] blockquote.callout-warning {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}
.docs-topic[data-v-7207a6ae] blockquote.callout-warning .callout-label {
  color: #fbbf24;
}
.docs-topic[data-v-7207a6ae] a {
  color: #8b95ff;
  text-decoration: underline;
}
.docs-topic[data-v-7207a6ae] a:hover {
  color: #b6bdff;
}

/* Auto-linked cross-references to other topics. Keep the bold-white emphasis the
   prose already used; the dotted underline is the only added clickability cue. */
.docs-topic[data-v-7207a6ae] a.docs-xref {
  color: #fff;
  font-weight: 600;
  text-decoration: underline dotted;
  text-decoration-color: #6b6b80;
  text-underline-offset: 3px;
  cursor: pointer;
}
.docs-topic[data-v-7207a6ae] a.docs-xref:hover {
  color: #fff;
  text-decoration-color: #8b95ff;
}
.docs-topic[data-v-7207a6ae] a.docs-xref:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
[data-v-7207a6ae] .docs-highlight {
  background: #fde047;
  color: #1a1a1a;
  padding: 0 0.15em;
  border-radius: 3px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 767px) {
.docs-modal[data-v-7207a6ae] {
    height: 95vh;
    max-height: none;
    border-radius: 8px;
}
.docs-sidenav[data-v-7207a6ae] {
    position: absolute;
    top: 57px;
    bottom: 0;
    left: 0;
    width: 78%;
    max-width: 320px;
    z-index: 5;
    transform: translateX(-100%);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4);
}
.docs-sidenav.open[data-v-7207a6ae] {
    transform: translateX(0);
}
.docs-modal.drawer-closed .docs-sidenav[data-v-7207a6ae] {
    width: 78%;
    max-width: 320px;
    border-right-width: 1px;
}
.docs-content-inner[data-v-7207a6ae] {
    padding: 1.25rem 1.25rem 3rem;
}
.docs-section-heading[data-v-7207a6ae] {
    font-size: 1.4rem;
}
}

.type-pill-wrap[data-v-1a9ca67e] {
  position: relative;
  display: inline-block;
}
.type-pill[data-v-1a9ca67e] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  vertical-align: middle;
}
.pill-credit[data-v-1a9ca67e] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.pill-debit[data-v-1a9ca67e] {
  background: rgba(var(--cat-blue-rgb), 0.15);
  color: var(--cat-blue);
  border: 1px solid rgba(var(--cat-blue-rgb), 0.3);
}
.pill-iron[data-v-1a9ca67e] {
  background: rgba(var(--cat-violet-rgb), 0.15);
  color: var(--cat-violet);
  border: 1px solid rgba(var(--cat-violet-rgb), 0.3);
}
.pill-generic[data-v-1a9ca67e] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.type-pill-tooltip[data-v-1a9ca67e] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.type-pill-wrap:hover .type-pill-tooltip[data-v-1a9ca67e] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

.alerts-today[data-v-4d67cf8f] {
  background: #1a1a24;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.alerts-header[data-v-4d67cf8f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.alerts-header h2[data-v-4d67cf8f] {
  margin: 0;
  font-size: 1.05rem;
  color: #fed7aa;
}
.refresh-btn[data-v-4d67cf8f] {
  background: transparent;
  border: 1px solid #3a3a4a;
  color: #d4d4d8;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.refresh-btn[data-v-4d67cf8f]:disabled { opacity: 0.5; cursor: not-allowed;
}
.refresh-btn[data-v-4d67cf8f]:hover:not(:disabled) { border-color: #ea580c; color: #fed7aa;
}
.alerts-error[data-v-4d67cf8f] {
  color: #f87171;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.alerts-empty[data-v-4d67cf8f] {
  color: #71717a;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

/* A 14-column table can't fit a phone: contain it in a horizontal-scroll
   region so it scrolls sideways WITHIN its card instead of overflowing the
   page — the app-wide pattern for wide tables. */
.alerts-table-scroll[data-v-4d67cf8f] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.alerts-table[data-v-4d67cf8f] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.alerts-table th[data-v-4d67cf8f] {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #2a2a3a;
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}
.alerts-table td[data-v-4d67cf8f] {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #1f1f2a;
  color: #e4e4e7;
  white-space: nowrap;
}
.ticker-cell[data-v-4d67cf8f] { font-family: ui-monospace, monospace; font-size: 0.8rem;
}
.type-cell[data-v-4d67cf8f] { white-space: nowrap;
}
/* Single-leg call/put pill. Spread rows are styled by SpreadTypePill itself.
   Neutral tint on purpose so C/P read as structure, not win/loss color. */
.type-single[data-v-4d67cf8f] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
/* Wheel-trade badge — orthogonal to the option/spread type, so it renders as a
   distinct amber tag alongside the Type pill (a row can be e.g. "IC" + Wheel). */
.type-wheel[data-v-4d67cf8f] {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.live-price-cell[data-v-4d67cf8f] {
  font-variant-numeric: tabular-nums;
  color: #93c5fd;
  border-radius: 4px;
}
.live-price-cell.live-price-positive[data-v-4d67cf8f] { color: #4ade80;
}
.live-price-cell.live-price-negative[data-v-4d67cf8f] { color: #f87171;
}
.high-low-cell[data-v-4d67cf8f] { font-variant-numeric: tabular-nums;
}
/* Favorable extreme = green, adverse = red. For a long the HIGH is favorable
   and the LOW adverse; for a credit spread / short it's reversed (LOW = cheapest
   buyback = favorable), so the template picks the class by direction. */
.high-low-cell.hl-favorable[data-v-4d67cf8f] { color: #4ade80;
}
.high-low-cell.hl-adverse[data-v-4d67cf8f] { color: #f87171;
}
.pnl-cell[data-v-4d67cf8f] {
  --pnl-color: #d4d4d8;
  font-variant-numeric: tabular-nums;
  color: var(--pnl-color);
  border-radius: 4px;
}
.pnl-cell.pnl-positive[data-v-4d67cf8f] { --pnl-color: #4ade80;
}
.pnl-cell.pnl-negative[data-v-4d67cf8f] { --pnl-color: #f87171;
}

/* Marks an exit price that is an average across the trade's exit legs, so the
   number isn't read as a single fill that failed to match any one target. */
.exit-avg-tag[data-v-4d67cf8f] {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  opacity: 0.75;
  vertical-align: super;
}
.stop-cell[data-v-4d67cf8f] { font-variant-numeric: tabular-nums; color: #fb923c;
}
.stop-multileg[data-v-4d67cf8f] { display: inline-flex; flex-direction: column; gap: 0.1rem; line-height: 1.2;
}
.stop-leg[data-v-4d67cf8f] { display: inline-flex; gap: 0.35rem; align-items: baseline;
}
.stop-leg-label[data-v-4d67cf8f] {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fed7aa;
  opacity: 0.7;
}
.status-pill[data-v-4d67cf8f] {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status-active[data-v-4d67cf8f] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.status-closed[data-v-4d67cf8f] { background: rgba(113, 113, 122, 0.2); color: #a1a1aa;
}
.status-expired[data-v-4d67cf8f] { background: rgba(245, 158, 11, 0.15); color: #f59e0b;
}
.status-stopped[data-v-4d67cf8f] { background: rgba(var(--loss-rgb), 0.15); color: var(--loss);
}
.outcome-pill[data-v-4d67cf8f] {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}
.outcome-win[data-v-4d67cf8f] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.outcome-loss[data-v-4d67cf8f] { background: rgba(var(--loss-rgb), 0.15); color: var(--loss);
}
.outcome-be[data-v-4d67cf8f] { background: rgba(113, 113, 122, 0.2); color: #a1a1aa;
}

/* Phone: tighten the card padding and shrink the dense table so more columns
   fit before the horizontal scroll is needed. */
@media (max-width: 768px) {
.alerts-today[data-v-4d67cf8f] { padding: 0.85rem 0.75rem;
}
.alerts-table[data-v-4d67cf8f] { font-size: 0.78rem;
}
.alerts-table th[data-v-4d67cf8f],
  .alerts-table td[data-v-4d67cf8f] { padding: 0.4rem 0.5rem;
}
}

.sc-dashboard[data-v-2832461d] {
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  color: #e5e7eb;
}
.sc-header h1[data-v-2832461d] {
  margin: 0;
  font-size: 1.6rem;
}
.sc-header .subtitle[data-v-2832461d] {
  margin: 0.25rem 0 1.25rem;
  color: #9ca3af;
  font-size: 0.95rem;
}
.sc-tiles[data-v-2832461d] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.tile[data-v-2832461d] {
  background: #1f2937;
  border: 1px solid #2d3748;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.tile-label[data-v-2832461d] {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.tile-value[data-v-2832461d] {
  font-size: 1.75rem;
  font-weight: 600;
  color: #f3f4f6;
}
.tile-sub[data-v-2832461d] {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.sc-actions[data-v-2832461d] {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}
.cta[data-v-2832461d] {
  color: #4fd1c5;
  text-decoration: none;
  font-size: 0.85rem;
}
.cta[data-v-2832461d]:hover {
  text-decoration: underline;
}

.modal-overlay[data-v-9823fafc] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.settings-modal[data-v-9823fafc] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.modal-close-x[data-v-9823fafc] {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}
.modal-close-x[data-v-9823fafc]:hover {
  color: #fff;
}
.modal-title[data-v-9823fafc] {
  color: #fff;
  font-size: 1.25rem;
  margin: 0 0 0.25rem 0;
}
.modal-subtitle[data-v-9823fafc] {
  color: var(--text-mute);
  margin: 0 0 1rem 0;
  font-size: 0.85rem;
}
.settings-modal-body[data-v-9823fafc] {
  overflow-y: auto;
  max-height: 50vh;
  margin-bottom: 1rem;
}
.section-title[data-v-9823fafc] {
  color: #e0e0e0;
  font-size: 0.95rem;
  margin: 0.25rem 0 0.5rem 0;
  font-weight: 600;
}
.section-title-secondary[data-v-9823fafc] {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(45, 45, 68, 0.6);
  padding-top: 1rem;
}
.section-subtitle[data-v-9823fafc] {
  color: var(--text-mute);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
.settings-kv-table[data-v-9823fafc] {
  width: 100%;
  border-collapse: collapse;
}
.settings-kv-table tr[data-v-9823fafc] {
  border-bottom: 1px solid rgba(45, 45, 68, 0.5);
}
.settings-kv-table tr[data-v-9823fafc]:last-child {
  border-bottom: none;
}
.kv-key[data-v-9823fafc] {
  color: var(--text-mute);
  font-size: 0.8rem;
  font-family: monospace;
  padding: 0.5rem 1rem 0.5rem 0;
  white-space: nowrap;
  vertical-align: top;
  width: 1%;
}
.kv-value[data-v-9823fafc] {
  color: #e0e0e0;
  font-size: 0.85rem;
  padding: 0.5rem 0;
  word-break: break-word;
}
.kv-stack[data-v-9823fafc] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kv-line[data-v-9823fafc] {
  font-variant-numeric: tabular-nums;
}
.filter-row[data-v-9823fafc] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.filter-label[data-v-9823fafc] {
  color: var(--text-dim);
  min-width: 9rem;
}
.filter-op[data-v-9823fafc] {
  color: #e0e0e0;
  font-family: monospace;
}
.chip-group[data-v-9823fafc] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.chip[data-v-9823fafc] {
  background: rgba(var(--accent-rgb), 0.15);
  color: #9aa0ff;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.modal-footer[data-v-9823fafc] {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}
.btn-cancel[data-v-9823fafc] {
  background: var(--border);
  color: var(--text-dim);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-cancel[data-v-9823fafc]:hover {
  background: var(--border-strong);
}
.save-preset-group[data-v-9823fafc] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.preset-name-input[data-v-9823fafc] {
  background: #0f0f1a;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  width: 180px;
}
.preset-name-input[data-v-9823fafc]:focus {
  outline: none;
  border-color: var(--accent);
}
.btn-save-preset[data-v-9823fafc] {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-save-preset[data-v-9823fafc]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
}
.btn-save-preset[data-v-9823fafc]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-cancel-sm[data-v-9823fafc] {
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
}
.btn-cancel-sm[data-v-9823fafc]:hover {
  color: #aaa;
}
.preset-save-msg[data-v-9823fafc] {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5rem 0 0 0;
}
.preset-save-msg.success[data-v-9823fafc] {
  color: var(--profit);
}
.preset-save-msg.error[data-v-9823fafc] {
  color: var(--loss);
}

.type-pill-wrap[data-v-66dfca37] {
  position: relative;
  display: inline-block;
}
.type-pill[data-v-66dfca37] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  vertical-align: middle;
}
.pill-live[data-v-66dfca37] {
  background: rgba(var(--cat-blue-rgb), 0.15);
  color: var(--cat-blue);
  border: 1px solid rgba(var(--cat-blue-rgb), 0.3);
}
.pill-paper[data-v-66dfca37] {
  background: rgba(var(--paper-rgb), 0.15);
  color: var(--paper);
  border: 1px solid rgba(var(--paper-rgb), 0.4);
}
.pill-futures[data-v-66dfca37] {
  background: rgba(var(--cat-amber-rgb), 0.15);
  color: var(--cat-amber);
  border: 1px solid rgba(var(--cat-amber-rgb), 0.4);
}

/* Small suffix badge next to the broker pill for sim-funds / practice
   accounts (e.g. Tradovate demo). Reuses the amber tone so it reads as a modifier
   on the futures pill rather than a competing color. */
.practice-pill[data-v-66dfca37] {
  margin-left: 0.25rem;
  background: rgba(var(--cat-amber-rgb), 0.1);
  color: var(--cat-amber);
  border: 1px dashed rgba(var(--cat-amber-rgb), 0.5);
}
.type-pill-tooltip[data-v-66dfca37] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.type-pill-wrap:hover .type-pill-tooltip[data-v-66dfca37] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Self-contained so the card renders on the Trades page too — the global
   .chart-card* rules live in Dashboard.vue's unscoped block, which isn't loaded
   elsewhere. Values match that block exactly so the dashboard look is identical.
   Chart.js's responsive canvas needs a bounded parent height. */
.chart-card[data-v-502b3bb1] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 0;
}
.chart-card-title[data-v-502b3bb1] {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem 0;
}
.chart-card-body[data-v-502b3bb1] {
  position: relative;
  height: 220px;
}
.chart-card-empty[data-v-502b3bb1] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}

.skel[data-v-76dfe42d] { padding: var(--space-5, 20px);
}
.skel--metric[data-v-76dfe42d] { min-height: 118px;
}
.skel--trade[data-v-76dfe42d] { border-radius: var(--radius-lg, 16px); padding: var(--space-4, 16px); min-height: 150px;
}
.skel-row[data-v-76dfe42d] { display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.strategy-pill-wrap[data-v-a8a2a68e] {
  position: relative;
  display: inline-block;
}
.strategy-pill[data-v-a8a2a68e] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* Dotted underline signals a best-guess match (strategy not tagged on trade). */
.strategy-pill.ambiguous[data-v-a8a2a68e] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.strategy-pill-tooltip[data-v-a8a2a68e] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: #1a1a1a;
  color: #e5e7eb;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.strategy-pill-wrap:hover .strategy-pill-tooltip[data-v-a8a2a68e] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

.msd[data-v-b694ea0c] {
  position: relative;
}
.msd-button[data-v-b694ea0c] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 9rem;
  padding: 0.4rem 0.55rem;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 0.8rem;
  cursor: pointer;
}
.msd-button.open[data-v-b694ea0c],
.msd-button[data-v-b694ea0c]:hover {
  border-color: rgba(96, 165, 250, 0.6);
}
.msd-label[data-v-b694ea0c] {
  flex: 1;
  text-align: left;
}
.msd-count[data-v-b694ea0c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 700;
}
.msd-caret[data-v-b694ea0c] {
  color: #64748b;
  font-size: 0.7rem;
}
.msd-panel[data-v-b694ea0c] {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  width: 15rem;
  max-width: 80vw;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}
.msd-search[data-v-b694ea0c] {
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 5px;
  color: #e5e7eb;
  font-size: 0.78rem;
}
.msd-search[data-v-b694ea0c]:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
}
.msd-options[data-v-b694ea0c] {
  max-height: 16rem;
  overflow-y: auto;
}
.msd-option[data-v-b694ea0c] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #cbd5e1;
  cursor: pointer;
}
.msd-option[data-v-b694ea0c]:hover {
  background: rgba(59, 130, 246, 0.08);
}
.msd-dot[data-v-b694ea0c] {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
}
.msd-option-text[data-v-b694ea0c] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msd-empty[data-v-b694ea0c] {
  margin: 0;
  padding: 0.5rem;
  text-align: center;
  color: #64748b;
  font-size: 0.78rem;
}
.msd-footer[data-v-b694ea0c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.msd-selected[data-v-b694ea0c] {
  font-size: 0.72rem;
  color: #64748b;
}
.msd-clear[data-v-b694ea0c] {
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(var(--loss-rgb), 0.35);
  border-radius: 5px;
  background: rgba(var(--loss-rgb), 0.08);
  color: #fca5a5;
  font-size: 0.72rem;
  cursor: pointer;
}

.tier-modal-overlay[data-v-abea669d] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
.tier-modal[data-v-abea669d] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tier-modal-header[data-v-abea669d] {
  padding: 1.5rem 1.5rem 0;
  position: relative;
}
.tier-modal-header h2[data-v-abea669d] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.tier-modal-subtitle[data-v-abea669d] {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}
.tier-modal-close[data-v-abea669d] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
}
.tier-modal-close[data-v-abea669d]:hover { color: #fff;
}
.tier-modal-body[data-v-abea669d] {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.billing-toggle-row[data-v-abea669d] {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.billing-toggle[data-v-abea669d] {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.toggle-btn[data-v-abea669d] {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.15s;
}
.toggle-btn.active[data-v-abea669d] { background: var(--accent); color: #fff;
}
.save-badge[data-v-abea669d] {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
  border-radius: 3px;
}
.tier-cards[data-v-abea669d] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.tier-card[data-v-abea669d] {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.tier-card[data-v-abea669d]:hover { border-color: var(--border-strong);
}
.tier-card.selected[data-v-abea669d] { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05);
}
.tier-card.is-current[data-v-abea669d] { border-color: var(--profit); background: rgba(var(--profit-rgb), 0.05); cursor: default;
}
.tier-card.highlight[data-v-abea669d] { border-color: var(--accent);
}
.tier-badge[data-v-abea669d] {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
}
.tier-badge.current[data-v-abea669d] { background: var(--profit); left: 1rem; right: auto;
}
.tier-card h3[data-v-abea669d] { margin: 0.25rem 0 0.75rem; font-size: 1rem; font-weight: 700; color: #fff;
}
.tier-price[data-v-abea669d] { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.25rem;
}
.price-amount[data-v-abea669d] { font-size: 1.5rem; font-weight: 700; color: #fff;
}
.price-period[data-v-abea669d] { font-size: 0.8rem; color: var(--text-mute);
}
.tier-annual[data-v-abea669d] { font-size: 0.75rem; color: var(--text-mute); margin-bottom: 0.5rem;
}
.annual-save[data-v-abea669d] { color: var(--profit); font-weight: 600; margin-left: 0.5rem;
}
.tier-features[data-v-abea669d] { list-style: none; padding: 0; margin: 0.75rem 0 0;
}
.tier-features li[data-v-abea669d] { font-size: 0.8rem; color: var(--text-dim); padding: 0.25rem 0;
}
.tier-features strong[data-v-abea669d] { color: #fff;
}
.action-info[data-v-abea669d] { margin-bottom: 1rem;
}
.lifetime-strike[data-v-abea669d] { text-decoration: line-through; opacity: 0.7;
}
.upgrade-info[data-v-abea669d] {
  padding: 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0;
}
.downgrade-info[data-v-abea669d] {
  padding: 0.75rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0;
}
.disclaimer[data-v-abea669d] {
  font-size: 0.7rem;
  color: var(--text-mute);
  text-align: center;
  margin: 0;
}
.tier-error[data-v-abea669d] {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 6px;
  color: var(--loss);
  font-size: 0.8rem;
}
.tier-modal-footer[data-v-abea669d] {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.btn-cancel[data-v-abea669d] {
  padding: 0.5rem 1rem;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-cancel[data-v-abea669d]:hover { background: var(--border-strong); color: #fff;
}
.btn-confirm[data-v-abea669d] {
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.15s;
}
.btn-confirm[data-v-abea669d]:hover:not(:disabled) { background: var(--accent-2);
}
.btn-confirm[data-v-abea669d]:disabled { opacity: 0.5; cursor: not-allowed;
}
.btn-spinner[data-v-abea669d] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-abea669d 0.8s linear infinite;
}
@keyframes spin-abea669d {
to { transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.tier-cards[data-v-abea669d] { grid-template-columns: 1fr;
}
.tier-modal[data-v-abea669d] { max-width: 100%;
}
}

/* Mirrors the dashboard's global .metric-card glass tile so it sits uniformly
   in the grid, but self-contained so it also styles correctly on the Calendar
   page (where Dashboard.vue's styles may not be loaded). Class name kept — the
   screenshot manifest pins .payoff-card. */
.payoff-card[data-v-aa38a52f] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: rd-rise .6s var(--ease-out) both;
}
.payoff-card[data-v-aa38a52f]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.payoff-card[data-v-aa38a52f]:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.payoff-card[data-v-aa38a52f]:hover::before { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.payoff-card[data-v-aa38a52f] { animation: none;
}
}
.payoff-header[data-v-aa38a52f] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.payoff-icon[data-v-aa38a52f] {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}
.payoff-header h3[data-v-aa38a52f] {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.payoff-meta[data-v-aa38a52f] {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-bottom: 0.6rem;
}
.payoff-value[data-v-aa38a52f] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.payoff-value.positive[data-v-aa38a52f] {
  color: var(--profit);
}
.payoff-bar[data-v-aa38a52f] {
  height: 8px;
  margin-bottom: 0.6rem;
}
.payoff-bar-fill[data-v-aa38a52f] {
  background: var(--accent);
  box-shadow: var(--glow);
}
.payoff-bar-fill.is-paid[data-v-aa38a52f] {
  background: var(--profit);
  box-shadow: 0 0 18px rgba(var(--profit-rgb), 0.45);
}
.payoff-subtitle[data-v-aa38a52f] {
  font-size: 0.75rem;
  color: var(--text-mute);
}

.metric-sparkline[data-v-e4036cf1] {
  margin-top: 6px;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.card-wrapper[data-v-bf30a186] {
  display: contents;
}
.card-wrapper.edit-mode[data-v-bf30a186] {
  display: block;
  position: relative;
  min-width: 0;
  cursor: grab;
  border: 2px dashed transparent;
  border-radius: 10px;
  transition: border-color 0.15s, background-color 0.15s;
}
.card-wrapper.edit-mode[data-v-bf30a186]:hover {
  border-color: var(--border-strong);
}
.card-wrapper.drop-target[data-v-bf30a186] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}
.card-wrapper.is-dragging[data-v-bf30a186] {
  opacity: 0.4;
}
.edit-overlay[data-v-bf30a186] {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 5;
}
.remove-btn[data-v-bf30a186] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(var(--loss-rgb), 0.15);
  border: none;
  border-radius: 4px;
  color: var(--loss);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.remove-btn[data-v-bf30a186]:hover {
  background: rgba(var(--loss-rgb), 0.3);
  color: #fff;
}

.modal-overlay[data-v-976ea131] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.card-picker-modal[data-v-976ea131] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.picker-header[data-v-976ea131] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.picker-header h3[data-v-976ea131] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.picker-close[data-v-976ea131] {
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}
.picker-close[data-v-976ea131]:hover {
  color: #fff;
}
.picker-body[data-v-976ea131] {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}
.picker-section[data-v-976ea131] {
  margin-bottom: 1.25rem;
}
.picker-section[data-v-976ea131]:last-child {
  margin-bottom: 0;
}
.picker-section h4[data-v-976ea131] {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.filter-select[data-v-976ea131] {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
}
.picker-option[data-v-976ea131] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.picker-option[data-v-976ea131]:hover {
  background: rgba(255, 255, 255, 0.05);
}
.picker-option input[type="checkbox"][data-v-976ea131] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.option-info[data-v-976ea131] {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.option-label[data-v-976ea131] {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}
.option-desc[data-v-976ea131] {
  font-size: 0.7rem;
  color: var(--text-mute);
}
.size-tag[data-v-976ea131] {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.size-tag-single[data-v-976ea131] {
  background: rgba(160, 160, 176, 0.15);
  color: var(--text-dim);
}
.size-tag-double[data-v-976ea131] {
  background: rgba(var(--accent-rgb), 0.18);
  color: #8b8ffc;
}

.dashboard[data-v-94f0be99] {
  padding: 1.5rem 2rem;
}

/* Toolbar buttons/selects now use the rd-* primitives (rd-tb-ghost /
   rd-tb-solid / rd-ui-select). The legacy classes are kept on the elements
   for binding-stability only; their icon sizing is preserved here. */
.btn-edit-dashboard svg[data-v-94f0be99],
.btn-save-layout svg[data-v-94f0be99] {
  width: 14px;
  height: 14px;
}

/* Time Period Filter — .rd-toolbar gives the flex row + bottom margin;
   push the action group to the right edge. */
.period-selector[data-v-94f0be99] {
  justify-content: space-between;
}
.period-filters[data-v-94f0be99] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-divider[data-v-94f0be99] {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 0.15rem;
}
.toolbar-actions[data-v-94f0be99] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}
.page-title[data-v-94f0be99] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.5rem 0;
}
.skip-day-banner[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.skip-icon[data-v-94f0be99] {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.skip-info[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.skip-info strong[data-v-94f0be99] {
  color: #f59e0b;
  font-size: 0.9rem;
}
.skip-info span[data-v-94f0be99] {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Coming Soon */
.coming-soon[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: var(--panel-solid);
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}
.coming-soon-icon[data-v-94f0be99] {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}
.coming-soon h2[data-v-94f0be99] {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: #fff;
}
.coming-soon p[data-v-94f0be99] {
  margin: 0;
  color: var(--text-mute);
  font-size: 1rem;
}
.coming-soon-hint[data-v-94f0be99] {
  margin-top: 0.75rem !important;
  font-size: 0.875rem !important;
  color: var(--text-mute) !important;
}
.connection-warning[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  color: #f59e0b;
  font-size: 0.875rem;
}
.connection-warning svg[data-v-94f0be99] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pending-revision-banner[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  color: #c7cbff;
  font-size: 0.875rem;
}
.pending-revision-icon[data-v-94f0be99] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #a0a8ff;
}
.pending-revision-message[data-v-94f0be99] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.pending-revision-message strong[data-v-94f0be99] {
  color: #fff;
  font-weight: 600;
}
.pending-revision-message span[data-v-94f0be99] {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}
.pending-revision-actions[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pending-revision-cta[data-v-94f0be99] {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.pending-revision-cta[data-v-94f0be99]:hover {
  background: var(--accent-2);
}
.pending-revision-dismiss[data-v-94f0be99] {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.pending-revision-dismiss[data-v-94f0be99]:hover {
  color: rgba(255, 255, 255, 0.9);
}
.dashboard-content[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Metrics Grid */
.metrics-grid[data-v-94f0be99] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Charts zone — two-column layout. The card-inner styling (background,
   title color, body height) lives in the unscoped block below so it
   reaches child chart components. */
.charts-grid[data-v-94f0be99] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
.charts-grid[data-v-94f0be99] {
    grid-template-columns: 1fr;
}
}

/* Section heads above the customizable grids (metrics / charts / breakdowns).
   .dashboard-content is a column flex with a 1.5rem gap; pull the grid that
   immediately follows a section head up close to it. */
.rd-section-head[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rd-section-head .rd-eyebrow[data-v-94f0be99] {
  margin-bottom: 0;
}
.rd-section-head + .metrics-grid[data-v-94f0be99],
.rd-section-head + .charts-grid[data-v-94f0be99],
.rd-section-head + .breakdown-tables[data-v-94f0be99] {
  margin-top: -0.85rem;
}

/* Trades Section — chrome now comes from .rd-panel; keep a little inner padding
   for the body content below the .rd-panel-head. */
.trades-section[data-v-94f0be99] {
  padding-bottom: 1.25rem;
}
.trades-section > .loading-state[data-v-94f0be99],
.trades-section > .empty-state[data-v-94f0be99],
.trades-section .fees-banner[data-v-94f0be99] {
  margin-left: 1.125rem;
  margin-right: 1.125rem;
}

/* The .rd-panel-head provides padding + the title row; clear the legacy
   bottom margin so it doesn't double up. */
.section-header[data-v-94f0be99] {
  margin-bottom: 0;
}
.section-header-right[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.recent-trades-select[data-v-94f0be99] {
  font-size: 0.75rem;
}
.trade-count[data-v-94f0be99] {
  font-size: 0.8rem;
  color: var(--text-mute);
}
.loading-state[data-v-94f0be99],
.empty-state[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-mute);
}
.loading-state .spinner[data-v-94f0be99] {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-94f0be99 0.8s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin-94f0be99 {
to {
    transform: rotate(360deg);
}
}
.empty-state svg[data-v-94f0be99] {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.empty-state p[data-v-94f0be99],
.loading-state p[data-v-94f0be99] {
  margin: 0;
  font-size: 0.9rem;
}

/* Trades Table */
.trades-table-container[data-v-94f0be99] {
  overflow-x: auto;
}
.trades-table[data-v-94f0be99] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.trades-table th[data-v-94f0be99] {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.trades-table td[data-v-94f0be99] {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(45, 45, 68, 0.5);
  color: #e0e0e0;
}
.trades-table td.positive[data-v-94f0be99] {
  color: var(--profit);
  font-weight: 600;
}
.trades-table td.negative[data-v-94f0be99] {
  color: var(--loss);
  font-weight: 600;
}
.trades-table td.neutral[data-v-94f0be99] {
  color: var(--text-mute);
}
.trades-table td.slip-positive[data-v-94f0be99] {
  color: #4ade80;
  font-size: 0.75rem;
}
.trades-table td.slip-negative[data-v-94f0be99] {
  color: #f87171;
  font-size: 0.75rem;
}
.trades-table tbody tr[data-v-94f0be99]:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
.fees-banner[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #a0a8ff;
}
.fees-banner-icon[data-v-94f0be99] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: #a0a8ff;
}
.dashboard-fees-banner[data-v-94f0be99] {
  margin-bottom: 1rem;
}
.fees-cell[data-v-94f0be99] {
  font-size: 0.8rem;
  opacity: 0.85;
}
.date-cell[data-v-94f0be99] {
  color: var(--text-mute);
  font-family: monospace;
}
.time-cell[data-v-94f0be99] {
  color: var(--text-mute);
  font-family: monospace;
}
.symbol-cell[data-v-94f0be99] {
  font-weight: 500;
  color: #fff;
}

/* Slippage */
.slip-positive[data-v-94f0be99] {
  color: #4ade80;
  font-size: 0.75rem;
}
.slip-negative[data-v-94f0be99] {
  color: #f87171;
  font-size: 0.75rem;
}

/* Exit Type Badges */
.exit-badge[data-v-94f0be99] {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.exit-badge.trailing[data-v-94f0be99] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.exit-badge.oco[data-v-94f0be99] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.exit-badge.stop[data-v-94f0be99] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
}

/* Outcome Badges */
.outcome-badge[data-v-94f0be99] {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.outcome-badge.win[data-v-94f0be99] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.outcome-badge.loss[data-v-94f0be99] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
}
.outcome-badge.breakeven[data-v-94f0be99] {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}
.source-badge[data-v-94f0be99] {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.source-badge.source-alert[data-v-94f0be99] {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.25);
}
.source-badge.source-manual[data-v-94f0be99] {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
  border: 1px solid rgba(234, 88, 12, 0.3);
}
.source-badge.source-copy-trade[data-v-94f0be99] {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
.dashboard[data-v-94f0be99] {
    padding: 1rem;
}
.period-selector[data-v-94f0be99] {
    flex-wrap: wrap;
    gap: 0.375rem;
}
.period-filters[data-v-94f0be99] {
    flex-wrap: wrap;
    gap: 0.375rem;
}
.period-filters .rd-seg[data-v-94f0be99] {
    flex: 1 1 auto;
    justify-content: center;
}
.toolbar-actions[data-v-94f0be99] {
    display: none;
}
.metrics-grid[data-v-94f0be99] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.metric-card[data-v-94f0be99] {
    padding: 1rem;
}
.metric-value[data-v-94f0be99] {
    font-size: 1.25rem;
}
.calendar-header[data-v-94f0be99] {
    flex-direction: column;
    align-items: flex-start;
}
.calendar-nav[data-v-94f0be99] {
    width: 100%;
    justify-content: space-between;
}
.calendar-day[data-v-94f0be99] {
    min-height: 60px;
    padding: 0.25rem;
}
.day-number[data-v-94f0be99] {
    font-size: 0.75rem;
}
.day-pnl[data-v-94f0be99] {
    font-size: 0.6rem;
}
.day-wl[data-v-94f0be99] {
    font-size: 0.5rem;
}
.week-pnl[data-v-94f0be99] {
    font-size: 0.65rem;
}
.week-wl[data-v-94f0be99] {
    font-size: 0.5rem;
}
}

/* View As Dropdown (Admin Only) */
.view-as-container[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.view-as-label[data-v-94f0be99] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}
.view-as-select[data-v-94f0be99] {
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-width: 180px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.view-as-select[data-v-94f0be99]:hover {
  border-color: var(--accent);
}
.view-as-select[data-v-94f0be99]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
.view-as-select[data-v-94f0be99]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.viewing-as-badge[data-v-94f0be99] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Active Trades Section — panel chrome from .rd-panel; padded body grid below. */
.active-trades-section[data-v-94f0be99] {
  padding-bottom: 1.25rem;
}
.active-trades-grid[data-v-94f0be99] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  padding: 0 1.125rem;
}

/* atrade card — mirrors the design's .atrade taxonomy */
.active-trade-card[data-v-94f0be99] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.active-trade-card[data-v-94f0be99]:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  background: var(--panel);
}
.active-trade-card.closing[data-v-94f0be99] {
  opacity: 0.6;
  pointer-events: none;
}
.trade-card-header[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: none;
}
.trade-ticker[data-v-94f0be99] {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.trade-qty[data-v-94f0be99] {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
}
.trade-card-body[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}

/* thin progress bar */
.at-bar[data-v-94f0be99] {
  height: 4px;
}
.at-bar-fill.positive[data-v-94f0be99] {
  background: var(--profit);
}
.at-bar-fill.negative[data-v-94f0be99] {
  background: var(--loss);
}
.trade-prices[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.price-row[data-v-94f0be99] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.price-label[data-v-94f0be99] {
  font-size: 0.68rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-value[data-v-94f0be99] {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-family: var(--mono);
}
.price-value.stop-price[data-v-94f0be99] {
  color: var(--loss);
}

/* P&L now lives on the top row, pushed to the right */
.trade-pnl.at-pnl[data-v-94f0be99] {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: right;
}
.trade-pnl .pnl-value[data-v-94f0be99] {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trade-pnl .pnl-percent[data-v-94f0be99] {
  font-family: var(--mono);
  font-size: 0.72rem;
  opacity: 0.85;
}
.trade-pnl.positive[data-v-94f0be99] {
  color: var(--profit);
}
.trade-pnl.negative[data-v-94f0be99] {
  color: var(--loss);
}
.trade-card-footer[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.trade-strategy[data-v-94f0be99] {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.trade-strategy.trailing[data-v-94f0be99] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.trade-strategy.oco[data-v-94f0be99] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.trailing-active-badge[data-v-94f0be99] {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
  animation: pulse-94f0be99 2s ease-in-out infinite;
}
@keyframes pulse-94f0be99 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.6;
}
}
.tier-badge[data-v-94f0be99] {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}
.close-trade-btn[data-v-94f0be99] {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 6px;
  color: var(--loss);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.close-trade-btn[data-v-94f0be99]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.3);
  border-color: var(--loss);
}
.close-trade-btn[data-v-94f0be99]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.close-trade-btn .btn-spinner[data-v-94f0be99] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--loss-rgb), 0.3);
  border-top-color: var(--loss);
  border-radius: 50%;
  animation: spin-94f0be99 0.8s linear infinite;
}

/* Beta indicator for close trade button */
.close-trade-btn.has-beta[data-v-94f0be99] {
  position: relative;
}
.close-trade-btn .beta-dot[data-v-94f0be99] {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  border: 1px solid var(--bg-2);
}

/* Beta badge for buttons */
.beta-badge[data-v-94f0be99] {
  display: inline-block;
  padding: 0.1rem 0.3rem;
  background: #f59e0b;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* Close Trade Modal */
.modal-overlay[data-v-94f0be99] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.close-trade-modal[data-v-94f0be99] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.modal-close-x[data-v-94f0be99] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.modal-close-x[data-v-94f0be99]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.modal-title[data-v-94f0be99] {
  margin: 0;
  padding: 1.25rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid var(--border);
}
.modal-body[data-v-94f0be99] {
  padding: 1.25rem 1.5rem;
}
.close-trade-details[data-v-94f0be99] {
  background: rgba(45, 45, 68, 0.5);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.detail-row[data-v-94f0be99] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
}
.detail-row[data-v-94f0be99]:not(:last-child) {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.detail-label[data-v-94f0be99] {
  font-size: 0.8rem;
  color: var(--text-mute);
}
.detail-value[data-v-94f0be99] {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
}
.detail-value.ticker[data-v-94f0be99] {
  font-weight: 600;
  color: var(--accent);
}
.close-warning[data-v-94f0be99] {
  font-size: 0.8rem;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0;
}
.modal-footer[data-v-94f0be99] {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}
.btn-cancel[data-v-94f0be99] {
  flex: 1;
  padding: 0.625rem 1rem;
  background: var(--border);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel[data-v-94f0be99]:hover:not(:disabled) {
  background: var(--border-strong);
  color: #fff;
}
.btn-cancel[data-v-94f0be99]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-close-trade[data-v-94f0be99] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--loss);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-close-trade[data-v-94f0be99]:hover:not(:disabled) {
  background: var(--loss);
}
.btn-close-trade[data-v-94f0be99]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.btn-close-trade .btn-spinner[data-v-94f0be99] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-94f0be99 0.8s linear infinite;
}

/* Toast Notification */
.toast[data-v-94f0be99] {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 1100;
}
.toast.success[data-v-94f0be99] {
  border-color: rgba(var(--profit-rgb), 0.5);
  background: linear-gradient(135deg, rgba(var(--profit-rgb), 0.15) 0%, var(--panel-solid) 100%);
}
.toast.error[data-v-94f0be99] {
  border-color: rgba(var(--loss-rgb), 0.5);
  background: linear-gradient(135deg, rgba(var(--loss-rgb), 0.15) 0%, var(--panel-solid) 100%);
}
.toast-message[data-v-94f0be99] {
  font-size: 0.875rem;
  color: #fff;
}
.toast.success .toast-message[data-v-94f0be99] {
  color: var(--profit);
}
.toast.error .toast-message[data-v-94f0be99] {
  color: var(--loss);
}
.toast-close[data-v-94f0be99] {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}
.toast-close[data-v-94f0be99]:hover {
  color: #fff;
}

/* Toast animation */
.toast-enter-active[data-v-94f0be99],
.toast-leave-active[data-v-94f0be99] {
  transition: all 0.3s ease;
}
.toast-enter-from[data-v-94f0be99],
.toast-leave-to[data-v-94f0be99] {
  opacity: 0;
  transform: translateX(100%);
}
@media (max-width: 768px) {
.active-trades-grid[data-v-94f0be99] {
    grid-template-columns: 1fr;
}
.toast[data-v-94f0be99] {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
}
}

/* Quick Stats Bar */
.quick-stats-bar[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--loss-rgb), 0.08);
  border: 1px solid rgba(var(--loss-rgb), 0.2);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.flatten-all-btn[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--loss);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.flatten-all-btn[data-v-94f0be99]:hover:not(:disabled) {
  background: var(--loss);
}
.flatten-all-btn[data-v-94f0be99]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.flatten-all-btn .btn-spinner[data-v-94f0be99] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-94f0be99 0.8s linear infinite;
}
.quick-stats[data-v-94f0be99] {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}
.stat-item[data-v-94f0be99] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.stat-label[data-v-94f0be99] {
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value[data-v-94f0be99] {
  font-size: 1rem;
  font-weight: 700;
}

/* Flatten Modal */
.flatten-modal[data-v-94f0be99] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.flatten-warning-banner[data-v-94f0be99] {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.flatten-warning-banner .warning-icon[data-v-94f0be99] {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.flatten-warning[data-v-94f0be99] {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  color: #fff;
}
.flatten-caution[data-v-94f0be99] {
  margin: 0;
  font-size: 0.8rem;
  color: var(--loss);
}
.flatten-positions-summary[data-v-94f0be99] {
  background: rgba(45, 45, 68, 0.5);
  border-radius: 8px;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
}
.position-row[data-v-94f0be99] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.position-row[data-v-94f0be99]:not(:last-child) {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}
.position-ticker[data-v-94f0be99] {
  font-weight: 600;
  color: #fff;
  font-size: 0.85rem;
  flex: 1;
}
.position-qty[data-v-94f0be99] {
  font-size: 0.75rem;
  color: var(--text-dim);
  background: rgba(var(--accent-rgb), 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.position-pnl[data-v-94f0be99] {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 70px;
  text-align: right;
}
.more-positions[data-v-94f0be99] {
  padding: 0.5rem 0;
  font-size: 0.8rem;
  color: var(--text-mute);
  text-align: center;
}
.flatten-errors[data-v-94f0be99] {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 6px;
}
.flatten-errors h4[data-v-94f0be99] {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--loss);
}
.flatten-errors ul[data-v-94f0be99] {
  margin: 0;
  padding-left: 1.25rem;
}
.flatten-errors li[data-v-94f0be99] {
  font-size: 0.8rem;
  color: #f87171;
  margin-bottom: 0.25rem;
}
.btn-flatten[data-v-94f0be99] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--loss);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-flatten[data-v-94f0be99]:hover:not(:disabled) {
  background: var(--loss);
}
.btn-flatten[data-v-94f0be99]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.btn-flatten .btn-spinner[data-v-94f0be99] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-94f0be99 0.8s linear infinite;
}
@media (max-width: 768px) {
.quick-stats-bar[data-v-94f0be99] {
    flex-wrap: wrap;
    gap: 1rem;
}
.flatten-all-btn[data-v-94f0be99] {
    width: 100%;
    justify-content: center;
}
.quick-stats[data-v-94f0be99] {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
}
}

/* Settings button on trade rows */
.settings-btn[data-v-94f0be99] {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: 0.25rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-btn[data-v-94f0be99]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.settings-btn.disabled[data-v-94f0be99] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Metric Card Styles (applied to child components).
   Glass treatment matches .rd-metric so the dashboard tiles read the same as
   the rest of the app (rd-rise entrance + hover-lift + accent top-hairline).
   Class name kept (screenshot manifest + payoff-card parity). */
.metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: rd-rise .6s var(--ease-out) both;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.metric-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.metric-card:hover::before { opacity: 1;
}
.metric-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.metric-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.metric-header h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.metric-value.positive { color: var(--profit);
}
.metric-value.negative { color: var(--loss);
}
.metric-value.neutral { color: #fff;
}
.metric-subtitle {
  font-size: 0.75rem;
  color: var(--text-mute);
}
.metric-value.day-name {
  font-size: 1.5rem;
  color: #fff;
}
.metric-subtitle.day-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.stat-separator { color: #444;
}
.best-day .metric-icon { color: var(--profit);
}
.worst-day .metric-icon { color: var(--loss);
}
.best-trade .metric-icon { color: var(--profit);
}
.worst-trade .metric-icon { color: var(--loss);
}
.profit-factor .metric-icon { color: #f59e0b;
}
.risk-reward .metric-icon { color: #8b5cf6;
}
.win-streak .metric-icon { color: var(--profit);
}
.loss-streak .metric-icon { color: var(--loss);
}
.winning-day-streak .metric-icon { color: var(--profit);
}
.losing-day-streak .metric-icon { color: var(--loss);
}
.avg-slippage .metric-icon { color: #f59e0b;
}
.metric-subtitle.trade-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.trade-details .ticker {
  font-weight: 600;
  color: #fff;
  background: rgba(var(--accent-rgb), 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Color utilities */
.positive { color: var(--profit); font-weight: 600;
}
.negative { color: var(--loss); font-weight: 600;
}
.neutral { color: var(--text-mute);
}

/* Breakdown Tables */
.breakdown-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.breakdown-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: rd-rise .6s var(--ease-out) both;
}
.breakdown-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.breakdown-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.breakdown-card:hover::before { opacity: 1;
}
.breakdown-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem 0;
}

/* Chart Card Styles (applied to child chart components — must be unscoped
   so they reach the chart-card-* classes defined inside each chart
   component's template). Title matches .breakdown-title exactly.
   Glass like .metric-card BUT no overflow:hidden (Chart.js tooltips can
   extend past the canvas edge) and no hover-lift (border-only, so the chart
   doesn't shift under the cursor mid-read — same rationale as .rd-panel). */
.chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  min-width: 0;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: rd-rise .6s var(--ease-out) both;
}
.chart-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.chart-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.chart-card:hover::before { opacity: 1;
}

/* Reduced-motion: drop the entrance animation (hover stays, it's opt-in).
   The global [data-animations='off'] pref already neutralizes rd-rise too. */
@media (prefers-reduced-motion: reduce) {
.metric-card, .breakdown-card, .chart-card { animation: none;
}
}

/* Edit mode: the DashboardCardWrapper (.card-wrapper.edit-mode) flips to
   display:block and owns the dashed drag chrome — suppress the child entrance
   + hover-lift so cards don't animate on the layout toggle or lift out of
   their drop-target box while dragging. */
.card-wrapper.edit-mode .metric-card,
.card-wrapper.edit-mode .breakdown-card,
.card-wrapper.edit-mode .chart-card,
.card-wrapper.edit-mode .payoff-card {
  animation: none;
  transition: none;
}
.card-wrapper.edit-mode .metric-card:hover,
.card-wrapper.edit-mode .breakdown-card:hover,
.card-wrapper.edit-mode .chart-card:hover,
.card-wrapper.edit-mode .payoff-card:hover {
  transform: none;
  box-shadow: none;
}

/* Staggered entry: cascade the metric tiles in on first paint instead of
   popping together. The delay applies to the animated card inside its
   display:contents wrapper (skeletons, which are direct .rd-skel children,
   are unaffected). Ramp is capped so late cards don't lag; edit-mode and
   reduced-motion set animation:none above, which nullifies the delay. */
.metrics-grid > :nth-child(1) :is(.metric-card, .payoff-card) { animation-delay: 0ms;
}
.metrics-grid > :nth-child(2) :is(.metric-card, .payoff-card) { animation-delay: 45ms;
}
.metrics-grid > :nth-child(3) :is(.metric-card, .payoff-card) { animation-delay: 90ms;
}
.metrics-grid > :nth-child(4) :is(.metric-card, .payoff-card) { animation-delay: 135ms;
}
.metrics-grid > :nth-child(5) :is(.metric-card, .payoff-card) { animation-delay: 180ms;
}
.metrics-grid > :nth-child(6) :is(.metric-card, .payoff-card) { animation-delay: 225ms;
}
.metrics-grid > :nth-child(7) :is(.metric-card, .payoff-card) { animation-delay: 270ms;
}
.metrics-grid > :nth-child(n+8) :is(.metric-card, .payoff-card) { animation-delay: 300ms;
}
.chart-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem 0;
}

/* Chart.js's responsive canvas observes its parent; a growable parent (flex
   growth, unbounded height) causes the donut to feedback-loop. Lock to a
   fixed height with no flex. */
.chart-card-body {
  position: relative;
  height: 220px;
}
.chart-donut-center {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.chart-donut-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.chart-donut-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
.chart-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}

/* Grid spans — wider charts take two columns. Needs to be unscoped so the
   rule matches whether the wrapper (edit mode) or the inner chart-card
   (normal display:contents mode) is the grid child. */
.charts-grid .chart-card-double,
.charts-grid .chart-slot-double {
  grid-column: span 2;
}
@media (max-width: 768px) {
.charts-grid .chart-card-double,
  .charts-grid .chart-slot-double {
    grid-column: span 1;
}
}
.breakdown-table-wrap { overflow-x: auto;
}
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.breakdown-table th {
  text-align: left;
  color: var(--text-mute);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.breakdown-table td {
  padding: 0.375rem 0.5rem;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(45, 45, 68, 0.5);
}
.breakdown-table tr:last-child td { border-bottom: none;
}
.breakdown-table .ticker-cell { font-weight: 600; color: #fff;
}
.breakdown-table .positive { color: var(--profit);
}
.breakdown-table .negative { color: var(--loss);
}
.breakdown-table .empty-cell { text-align: center; color: var(--text-mute); padding: 1rem;
}

.verified-wrap[data-v-73b84f7a] {
  position: relative;
  display: inline-block;
}
.verified-pill[data-v-73b84f7a] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  vertical-align: middle;
  background: rgba(var(--cat-green-rgb), 0.15);
  color: var(--cat-green);
  border: 1px solid rgba(var(--cat-green-rgb), 0.35);
}
.verified-pill.is-backfill[data-v-73b84f7a] {
  background: rgba(var(--cat-blue-rgb), 0.15);
  color: var(--cat-blue);
  border: 1px solid rgba(var(--cat-blue-rgb), 0.35);
}
.verified-tooltip[data-v-73b84f7a] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  background: var(--surface-2, #1a1d24);
  color: var(--text-1, #e6e6e6);
  border: 1px solid rgba(var(--cat-green-rgb), 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.verified-changes[data-v-73b84f7a] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.verified-change s[data-v-73b84f7a] {
  opacity: 0.6;
}
.verified-sub[data-v-73b84f7a] {
  opacity: 0.75;
}
.verified-wrap:hover .verified-tooltip[data-v-73b84f7a] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* ============================================================
   Web3 trading-terminal redesign — TradeCard (.tc taxonomy)
   Re-themes the existing class structure to the design prototype's
   trade-card look (panels, .tv tracks/zones/markers, .ml leg rows,
   .ef entry fills, stat row, ghost actions). Variables only.
   ============================================================ */
.trade-card[data-v-236c2807] {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: 16px;
  transition: border-color 0.2s var(--ease-out, ease), transform 0.2s var(--ease-out, ease), box-shadow 0.2s var(--ease-out, ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  /* Fill the grid cell so cards in the same row render at a uniform height
     regardless of how much vertical content each one has (e.g. multi-tier
     cards with the tier ladder vs legacy 2-phase cards without). */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.trade-card[data-v-236c2807]:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 14px 40px rgba(0, 0, 0, 0.4));
}

/* Accent top hairline on active cards (design .tc::before glow) */
.trade-card.status-active[data-v-236c2807]::before,
.trade-card.status-pending[data-v-236c2807]::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
}
.trade-card.status-pending[data-v-236c2807]::before {
  background: linear-gradient(90deg, transparent, rgba(var(--loss-rgb), 0.45), transparent);
}

/* Paper-broker trades — pink left edge + faint wash so paper trades are
   instantly distinguishable across active + completed views. Keyed per-trade
   off trade.brokerType === 'paper'. */
.trade-card.paper-trade[data-v-236c2807] {
  border-color: rgba(var(--paper-rgb), 0.35);
  background: linear-gradient(180deg, rgba(var(--paper-rgb), 0.10), rgba(var(--paper-rgb), 0.03)), var(--panel);
}
.trade-card.paper-trade[data-v-236c2807]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--paper);
  box-shadow: 0 0 14px rgba(var(--paper-rgb), 0.6);
}

/* Result Banner for completed trades */
.result-banner[data-v-236c2807] {
  margin: -16px -16px 14px -16px;
  padding: 7px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--display);
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
}
.result-banner.profit[data-v-236c2807] {
  background: linear-gradient(135deg, rgba(var(--profit-rgb), 0.85), rgba(var(--profit-rgb), 0.55));
  color: var(--accent-ink, #04110c);
}
.result-banner.loss[data-v-236c2807] {
  background: linear-gradient(135deg, rgba(var(--loss-rgb), 0.85), rgba(var(--loss-rgb), 0.55));
  color: #fff;
}
.result-banner.breakeven[data-v-236c2807] {
  background: linear-gradient(135deg, var(--panel-2), var(--panel-solid));
  color: var(--text-dim);
}
.trade-header[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.ticker-info[data-v-236c2807] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ticker[data-v-236c2807] {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

/* Opt-in live underlying (main-ticker) price, shown inline beside the symbol. */
.tc-underlying[data-v-236c2807] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted, #8b93a7);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badges[data-v-236c2807] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--sans);
}
.badge.option-type[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-dim);
}
.badge.option-type.put[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.16);
  color: var(--loss);
}
.badge.option-type.call[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.16);
  color: var(--profit);
}
.badge.strategy[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-dim);
}
.badge.strategy.trailing[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}
.badge.strategy.multi-trail[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.16);
  color: var(--profit);
}
.badge.strategy.oco[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-2);
}

/* Trade source badge (alert vs manual) */
.badge.trade-source.source-alert[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.badge.trade-source.source-manual[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
}
.badge.trade-source.source-copy-trade[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.14);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.badge.status[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-dim);
}
.badge.status.pending[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.16);
  color: var(--loss);
}
.badge.status.filled[data-v-236c2807],
.badge.status.active[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}
.badge.status.completed[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-mute);
}
.badge.averaged[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-2);
  cursor: help;
}

/* Detached ("Stop Copying") — amber, reads as a deliberate state change (the
   member took the wheel), distinct from the accent AVG pill and the red
   destructive actions. cursor:help pairs with the explanatory title tooltip. */
.badge.detached[data-v-236c2807] {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.trade-body[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Grow to fill the card so the footer always sits at the bottom and
     internal sections (price-row, viz, stats) distribute their slack
     evenly — keeps row-aligned cards visually balanced regardless of
     which one has the most content. */
  flex: 1;
  justify-content: space-between;
}

/* 4-up price/qty/pnl grid (design .tc-prices) */
.price-row[data-v-236c2807] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.price-item[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.price-item .label[data-v-236c2807] {
  font-size: 0.62rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.price-item .value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Entry price not yet filled — muted placeholder that self-corrects on fill. */
.price-item .value.tc-entry-pending[data-v-236c2807] {
  font-style: italic;
  font-weight: 500;
  opacity: 0.6;
}
.slippage-tag[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
}
.slippage-tag.slip-positive[data-v-236c2807] {
  color: var(--profit);
}
.slippage-tag.slip-negative[data-v-236c2807] {
  color: var(--loss);
}
.price-item.current .value[data-v-236c2807] {
  transition: color 0.3s;
}
.price-item .value.positive[data-v-236c2807] {
  color: var(--profit);
}
.price-item .value.negative[data-v-236c2807] {
  color: var(--loss);
}

/* Exit-mode label row (design .tc-mode-row) */
.tc-mode-row[data-v-236c2807] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-mode[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}

/* P&L Progress Bar (design .tv-style track) */
.pnl-container[data-v-236c2807] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.pnl-bar[data-v-236c2807] {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: visible;
}
.pnl-track[data-v-236c2807] {
  position: relative;
  height: 100%;
}
.pnl-center[data-v-236c2807] {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--border-strong);
  transform: translateX(-50%);
  border-radius: 1px;
}
.pnl-fill[data-v-236c2807] {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  transition: width 0.3s var(--ease-out, ease), left 0.3s var(--ease-out, ease), right 0.3s var(--ease-out, ease);
}
.pnl-fill.positive[data-v-236c2807] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.45), var(--profit));
  box-shadow: 0 0 12px rgba(var(--profit-rgb), 0.5);
}
.pnl-fill.negative[data-v-236c2807] {
  background: linear-gradient(90deg, var(--loss), rgba(var(--loss-rgb), 0.45));
  box-shadow: 0 0 12px rgba(var(--loss-rgb), 0.5);
}
.pnl-fill.neutral[data-v-236c2807] {
  background: var(--border-strong);
}
.pnl-value[data-v-236c2807] {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 120px;
  justify-content: flex-end;
  font-family: var(--mono);
}
.pnl-amount[data-v-236c2807] {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pnl-percent[data-v-236c2807] {
  font-size: 0.8rem;
  opacity: 0.8;
}
.pnl-value.positive[data-v-236c2807] {
  color: var(--profit);
}
.pnl-value.negative[data-v-236c2807] {
  color: var(--loss);
}
.pnl-value.neutral[data-v-236c2807] {
  color: var(--text-mute);
}

/* Fees Breakdown */
.fees-breakdown[data-v-236c2807] {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}
.fees-item[data-v-236c2807] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.fees-label[data-v-236c2807] {
  color: var(--text-mute);
}
.fees-value[data-v-236c2807] {
  font-weight: 600;
}
.fees-value.positive[data-v-236c2807] { color: var(--profit);
}
.fees-value.negative[data-v-236c2807] { color: var(--loss);
}
.fees-value.neutral[data-v-236c2807] { color: var(--text-mute);
}

/* Tier Markers */
.tier-marker[data-v-236c2807] {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--text-mute);
  transform: translateX(-50%);
  z-index: 1;
  border-radius: 1px;
}
.tier-marker.reached[data-v-236c2807] {
  background: var(--accent);
}

/* Legacy Trailing Stop Visualization */
.trailing-stop-viz[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Phase Indicator */
.phase-indicator[data-v-236c2807] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.phase[data-v-236c2807] {
  flex: 1;
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  text-align: center;
  transition: all 0.2s var(--ease-out, ease);
}
.phase.active[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.phase.active.trailing[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.14);
  border-color: rgba(var(--profit-rgb), 0.35);
  color: var(--profit);
}
.phase-label[data-v-236c2807] {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.phase.active .phase-label[data-v-236c2807],
.phase.active.trailing .phase-label[data-v-236c2807] {
  color: inherit;
  opacity: 0.85;
}
.phase-value[data-v-236c2807] {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--mono);
}
.phase-arrow[data-v-236c2807] {
  color: var(--text-mute);
  font-size: 0.8rem;
}

/* Trigger Progress */
.trigger-progress[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 9px 12px;
}
.trigger-header[data-v-236c2807] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.trigger-label[data-v-236c2807] {
  font-size: 0.64rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trigger-value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--accent);
}
.trigger-value.reached[data-v-236c2807] {
  color: var(--profit);
}
.trigger-bar[data-v-236c2807] {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.trigger-fill[data-v-236c2807] {
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), var(--accent));
  border-radius: 3px;
  transition: width 0.3s var(--ease-out, ease);
}
.trigger-fill.reached[data-v-236c2807] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.5), var(--profit));
}
.trigger-hint[data-v-236c2807] {
  display: block;
  font-size: 0.6rem;
  color: var(--text-mute);
  margin-top: 6px;
  font-family: var(--mono);
}

/* Trailing Active Badge */
.trailing-active-badge[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(var(--profit-rgb), 0.12);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-radius: var(--radius-md, 12px);
  padding: 8px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--profit);
  font-weight: 600;
}

/* Main Progress Bar (design .tv track) */
.viz-bar-container[data-v-236c2807] {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 1.25rem;
}
.viz-bar[data-v-236c2807] {
  position: relative;
  height: 2.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: visible;
}

/* Zones */
.viz-zone[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.2s var(--ease-out, ease);
}
.viz-zone.loss-bg[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.1);
}
.viz-zone.profit-zone[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.18);
}
.viz-zone.loss-zone[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.28);
}
.viz-zone.locked-zone[data-v-236c2807] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.32), rgba(var(--profit-rgb), 0.14));
}

/* Markers */
.viz-marker[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transition: left 0.3s var(--ease-out, ease);
}
.viz-marker .marker-label[data-v-236c2807] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
}
.viz-marker .marker-label.top[data-v-236c2807] {
  top: -1rem;
}
.viz-marker .marker-label.bottom[data-v-236c2807] {
  bottom: -1rem;
}
.viz-marker .marker-label.faded[data-v-236c2807] {
  opacity: 0.5;
}

/* Entry Line */
.entry-line[data-v-236c2807] {
  width: 2px;
  background: var(--text-mute);
}
.entry-line .marker-label[data-v-236c2807] {
  color: var(--text-dim);
}

/* Trigger Line */
.trigger-line[data-v-236c2807] {
  width: 2px;
  background: var(--accent);
  opacity: 0.7;
}
.trigger-line .marker-label[data-v-236c2807] {
  color: var(--accent);
}

/* Initial Stop Marker */
.initial-stop-marker[data-v-236c2807] {
  width: 3px;
  background: var(--loss);
}
.initial-stop-marker .marker-label[data-v-236c2807] {
  color: var(--loss);
}

/* Trailing Stop Marker */
.trailing-stop-marker[data-v-236c2807] {
  width: 3px;
  background: var(--profit);
}
.trailing-stop-marker .marker-label[data-v-236c2807] {
  color: var(--profit);
}

/* Peak Marker */
.peak-marker[data-v-236c2807] {
  width: 2px;
  background: rgba(var(--profit-rgb), 0.4);
}
.peak-marker .marker-label[data-v-236c2807] {
  color: rgba(var(--profit-rgb), 0.7);
}

/* Current Price Marker */
.current-marker[data-v-236c2807] {
  width: 4px;
  border-radius: 2px;
  z-index: 3;
}
.current-marker.positive[data-v-236c2807] {
  background: var(--profit);
  box-shadow: 0 0 12px var(--profit);
}
.current-marker.positive .marker-label[data-v-236c2807] {
  color: var(--profit);
  font-weight: 700;
}
.current-marker.negative[data-v-236c2807] {
  background: var(--loss);
  box-shadow: 0 0 12px var(--loss);
}
.current-marker.negative .marker-label[data-v-236c2807] {
  color: var(--loss);
  font-weight: 700;
}

/* Stats Cards (design .tc-stats) */
.trailing-stats[data-v-236c2807] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.trailing-stats.trailing-stats-fees[data-v-236c2807] {
  grid-template-columns: repeat(3, 1fr);
}
.stat-card[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 8px 6px;
  text-align: center;
}
.stat-card .stat-label[data-v-236c2807] {
  display: block;
  font-size: 0.55rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}
.stat-card .stat-value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.stat-card .stat-value.positive[data-v-236c2807] {
  color: var(--profit);
}
.stat-card .stat-value.negative[data-v-236c2807] {
  color: var(--loss);
}
.stat-card .stat-value.peak[data-v-236c2807] {
  color: var(--profit);
}
.stat-card .stat-value.trailing[data-v-236c2807] {
  color: var(--accent);
}
.stat-card .stat-value.fixed[data-v-236c2807] {
  color: var(--loss);
}
.stat-card .stat-value.trail[data-v-236c2807] {
  color: var(--profit);
}
.stat-card .stat-value.neutral[data-v-236c2807] {
  color: var(--text-mute);
}

/* Trailing Info */
.trailing-info[data-v-236c2807] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
}
.tier-label[data-v-236c2807] {
  padding: 3px 8px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
}
.trail-percent[data-v-236c2807] {
  color: var(--text-mute);
}
.trail-pending[data-v-236c2807] {
  color: var(--text-mute);
  font-style: italic;
}

/* Stop Info */
.stop-info[data-v-236c2807] {
  display: flex;
  gap: 18px;
}

/* Entry Fills (averaging / scale-in history — design .ef). Renders on any
   trade card whose entryFills array has >1 element. Accent-toned so it scans
   distinctly from the profit-green exit-leg block. */
.entry-fills[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.entry-fills-header[data-v-236c2807] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}
.entry-fills-title[data-v-236c2807] {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--display);
}
.entry-fills-summary[data-v-236c2807] {
  color: var(--text-mute);
  font-family: var(--mono);
}
.entry-fill-row[data-v-236c2807] {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 8px;
  font-size: 0.76rem;
}
.entry-fill-row.entry-fill-initial[data-v-236c2807] {
  background: var(--panel-solid);
  border-color: var(--border);
}
.entry-fill-tag[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.9);
  color: var(--accent-ink, #04110c);
  font-weight: 700;
  font-size: 0.68rem;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
}
.entry-fill-row.entry-fill-initial .entry-fill-tag[data-v-236c2807] {
  background: var(--border-strong);
  color: var(--text);
}
.entry-fill-tag.avg[data-v-236c2807] {
  background: var(--profit);
  color: var(--accent-ink, #04110c);
}
.entry-fill-meta[data-v-236c2807] {
  color: var(--text-mute);
  font-size: 0.74rem;
  font-family: var(--mono);
}
.entry-fill-source-badge[data-v-236c2807] {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-weight: 600;
}
.entry-fill-row.entry-fill-initial .entry-fill-source-badge[data-v-236c2807] {
  background: var(--panel-2);
  color: var(--text-dim);
}
.entry-fill-price[data-v-236c2807] {
  color: var(--text);
  font-weight: 600;
  font-family: var(--mono);
  justify-self: end;
}
.entry-fill-limit[data-v-236c2807] {
  color: var(--text-mute);
  font-size: 0.7rem;
  font-style: italic;
  font-family: var(--mono);
}
.entry-fill-avg-row[data-v-236c2807] {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  background: rgba(var(--profit-rgb), 0.07);
  border: 1px solid rgba(var(--profit-rgb), 0.25);
  border-radius: 8px;
  font-size: 0.76rem;
}
.entry-fill-avg-row .entry-fill-price[data-v-236c2807] {
  color: var(--profit);
}

/* Multi-leg OCO viz (design .ml — replaces .oco-viz when 2+ legs) */
.multi-leg-viz[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.multi-leg-viz-header[data-v-236c2807] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}
.multi-leg-viz-title[data-v-236c2807] {
  color: var(--profit);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--display);
}
.multi-leg-viz-summary[data-v-236c2807] {
  color: var(--text-mute);
  font-family: var(--mono);
}
.multi-leg-row[data-v-236c2807] {
  padding: 9px 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.multi-leg-row.leg-outcome-positive[data-v-236c2807] {
  border-color: rgba(var(--profit-rgb), 0.32);
  background: rgba(var(--profit-rgb), 0.06);
}
.multi-leg-row.leg-outcome-negative[data-v-236c2807] {
  border-color: rgba(var(--loss-rgb), 0.32);
  background: rgba(var(--loss-rgb), 0.06);
}
.multi-leg-row.leg-state-cancelled[data-v-236c2807],
.multi-leg-row.leg-state-failed[data-v-236c2807] {
  border-color: var(--border);
  opacity: 0.65;
}
.multi-leg-row-header[data-v-236c2807] {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
}
.multi-leg-row .leg-tag[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.9);
  color: var(--accent-ink, #04110c);
  font-weight: 700;
  font-size: 0.68rem;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
}
.multi-leg-row .leg-meta[data-v-236c2807] {
  color: var(--text-mute);
  font-size: 0.74rem;
  font-family: var(--mono);
}
.multi-leg-row .leg-status-badge[data-v-236c2807] {
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-solid);
  color: var(--text-dim);
}
.multi-leg-row.leg-outcome-positive .leg-status-badge[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.16);
  color: var(--profit);
}
.multi-leg-row.leg-outcome-negative .leg-status-badge[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.16);
  color: var(--loss);
}
.multi-leg-row.leg-state-cancelled .leg-status-badge[data-v-236c2807],
.multi-leg-row.leg-state-failed .leg-status-badge[data-v-236c2807] {
  background: var(--panel-solid);
  color: var(--text-mute);
}
.multi-leg-row .leg-pnl-stack[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.multi-leg-row .leg-pnl[data-v-236c2807] {
  text-align: right;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: var(--mono);
}
.multi-leg-row .leg-pnl.positive[data-v-236c2807] { color: var(--profit);
}
.multi-leg-row .leg-pnl.negative[data-v-236c2807] { color: var(--loss);
}
.multi-leg-row .leg-fees[data-v-236c2807] {
  font-size: 0.64rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  font-family: var(--mono);
}
.multi-leg-row .leg-fees .positive[data-v-236c2807] { color: var(--profit);
}
.multi-leg-row .leg-fees .negative[data-v-236c2807] { color: var(--loss);
}
.multi-leg-distances[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.multi-leg-dist-row[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.multi-leg-terminal-summary[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 2px 1px;
}
.multi-leg-terminal-summary .terminal-line[data-v-236c2807] {
  font-style: italic;
}
.multi-leg-terminal-summary .terminal-config[data-v-236c2807] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.7rem;
  color: var(--text-mute);
  font-family: var(--mono);
}
.multi-leg-terminal-summary .terminal-config-item .terminal-config-label[data-v-236c2807] {
  color: var(--text-mute);
  margin-right: 0.2rem;
  letter-spacing: 0.3px;
}
.multi-leg-stats[data-v-236c2807] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Completed multi-leg footer: Final / Gross / Fees / Net — render as 2×2
   instead of inheriting the 3-col .oco-stats-fees rule (which would wrap
   the fourth card onto its own row). */
.oco-stats.multi-leg-stats.oco-stats-fees[data-v-236c2807] {
  grid-template-columns: repeat(2, 1fr);
}

/* Multi-leg OCO display (compact list — used in legacy stop-info area) */
.multi-leg-info[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.multi-leg-header[data-v-236c2807] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}
.multi-leg-title[data-v-236c2807] {
  color: var(--profit);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--display);
}
.multi-leg-summary[data-v-236c2807] {
  color: var(--text-mute);
  font-family: var(--mono);
}
.leg-row[data-v-236c2807] {
  display: grid;
  /* 6 columns: tag, qty, TP, SL, status badge, close ×.
     Without the trailing `auto`, the × button has no slot and wraps to a
     new line under the badge. */
  grid-template-columns: auto auto 1fr 1fr auto auto;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-family: var(--mono);
}
.leg-tag[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.9);
  color: var(--accent-ink, #04110c);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.leg-qty[data-v-236c2807] {
  color: var(--text-mute);
  font-size: 0.74rem;
}
.leg-tp[data-v-236c2807] {
  color: var(--profit);
}
.leg-sl[data-v-236c2807] {
  color: var(--loss);
}
.leg-tp .label[data-v-236c2807],
.leg-sl .label[data-v-236c2807] {
  font-size: 0.64rem;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-right: 4px;
  font-family: var(--sans);
}
.leg-status-badge[data-v-236c2807] {
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-solid);
  color: var(--text-dim);
  font-family: var(--sans);
}
.leg-status-live .leg-status-badge[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.leg-status-tp_filled .leg-status-badge[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.leg-status-sl_filled .leg-status-badge[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
}
.leg-status-cancelled .leg-status-badge[data-v-236c2807],
.leg-status-failed .leg-status-badge[data-v-236c2807] {
  background: var(--panel-solid);
  color: var(--text-mute);
}
.leg-status-tp_filled[data-v-236c2807],
.leg-status-sl_filled[data-v-236c2807],
.leg-status-cancelled[data-v-236c2807],
.leg-status-failed[data-v-236c2807] {
  opacity: 0.55;
}

/* Per-leg close button — small × tucked at the right end of each live leg
   row. Visually quieter than the trade-level Close so the operator's eye
   still goes to the whole-trade action first. */
.leg-close-btn[data-v-236c2807] {
  margin-left: 6px;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  background: rgba(var(--loss-rgb), 0.12);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  color: var(--loss);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.16s var(--ease-out, ease);
}
.leg-close-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.22);
  border-color: rgba(var(--loss-rgb), 0.5);
}
.leg-close-btn[data-v-236c2807]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.stop-item[data-v-236c2807] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stop-item .label[data-v-236c2807] {
  font-size: 0.66rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stop-item .value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
}
.stop-item .value.stop[data-v-236c2807] {
  color: var(--loss);
}
.stop-item .value.target[data-v-236c2807] {
  color: var(--profit);
}

/* Inline modify-SL editor (OCO active trades, beta testers). The editable
 * variant gets a hover affordance so the click target is discoverable; the
 * editor variant swaps the span for an input that mirrors the span's red
 * color so the row doesn't visually shift on toggle. */
.stop-item .value.stop.stop-editable[data-v-236c2807] {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease;
}
.stop-item .value.stop.stop-editable[data-v-236c2807]:hover {
  border-bottom-color: rgba(var(--loss-rgb), 0.6);
}
.stop-item .value.stop.stop-editable.is-busy[data-v-236c2807] {
  opacity: 0.7;
  cursor: progress;
}
.stop-item .value.stop.stop-editor[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.stop-item .stop-prefix[data-v-236c2807] {
  color: var(--loss);
}
.stop-item .stop-input[data-v-236c2807] {
  width: 5ch;
  padding: 0 2px;
  font: inherit;
  color: var(--loss);
  background: rgba(var(--loss-rgb), 0.08);
  border: 1px solid rgba(var(--loss-rgb), 0.5);
  border-radius: 3px;
  outline: none;
}
.stop-item .stop-input[data-v-236c2807]:focus {
  border-color: var(--loss);
  background: rgba(var(--loss-rgb), 0.12);
}
.stop-item .stop-input[data-v-236c2807]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.stop-item .stop-spinner[data-v-236c2807] {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: 2px solid rgba(var(--loss-rgb), 0.3);
  border-top-color: var(--loss);
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
  display: inline-block;
}

/* Inline commit / cancel buttons next to the stop input. Required for
 * mobile because iOS's decimal numeric pad has no Return key — the existing
 * Enter / Esc / tap-elsewhere-blur flow is preserved for desktop, these
 * just add a tap target that doesn't trigger blur (mousedown.prevent). */
.stop-confirm-btn[data-v-236c2807],
.stop-cancel-btn[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.5);
  color: var(--loss);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.1;
  margin-left: 2px;
  font-family: inherit;
}
.stop-confirm-btn[data-v-236c2807]:hover:not(:disabled),
.stop-cancel-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.28);
  border-color: rgba(var(--loss-rgb), 0.7);
}
.stop-cancel-btn[data-v-236c2807] { color: var(--text-dim); background: var(--panel-2); border-color: var(--border-strong);
}
.stop-cancel-btn[data-v-236c2807]:hover:not(:disabled) { background: var(--panel-solid); border-color: var(--border-strong); color: var(--text);
}
.stop-confirm-btn[data-v-236c2807]:disabled,
.stop-cancel-btn[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}

/* Bracket badge — appended to the ✓ commit button when BOTH SL and TP
 * editors are open with valid dirty drafts, so the commit will fire a
 * single modify-bracket cancel-replace instead of two. Renders a small
 * "B" pill after the checkmark. */
.stop-confirm-btn.is-bracket[data-v-236c2807] {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--accent);
  padding-right: 14px;
  position: relative;
}
.stop-confirm-btn.is-bracket[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.8);
}
.stop-confirm-btn.is-bracket[data-v-236c2807]::after {
  content: 'B';
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: var(--accent-ink, #04110c);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  letter-spacing: 0;
}

/* Discoverability hint shown inside an open SL/TP editor when the
 * sibling editor isn't open yet — clicking it opens the other side so
 * the operator can combine both into one modify-bracket cancel-replace. */
.bracket-hint[data-v-236c2807] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}
.bracket-hint[data-v-236c2807]:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.7);
  border-style: solid;
}

/* Footer */
.trade-footer[data-v-236c2807] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
}

/* ========== Multi-Tier Trailing Stop Visualization ========== */
.multi-tier-viz[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Tier Progression Ladder */
.tier-ladder[data-v-236c2807] {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 4.5rem;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.tier-block[data-v-236c2807] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
  border-radius: 5px 5px 0 0;
  background: var(--border);
  transition: all 0.2s var(--ease-out, ease);
  min-height: 40%;
}
.tier-block.fixed-block[data-v-236c2807] {
  height: 40%;
}
.tier-block.active[data-v-236c2807] {
  background: var(--tier-color, var(--accent));
}
.tier-block.fixed-block.active[data-v-236c2807] {
  background: var(--accent);
}
.tier-block.passed[data-v-236c2807] {
  background: var(--tier-color, var(--accent-2));
  opacity: 0.5;
}
.tier-name[data-v-236c2807] {
  font-size: 0.6rem;
  font-weight: 700;
  font-family: var(--mono);
  color: #fff;
}
.tier-trail[data-v-236c2807] {
  font-size: 0.55rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.9);
}
.tier-trigger[data-v-236c2807] {
  font-size: 0.5rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.6);
}
.tier-stop[data-v-236c2807] {
  font-size: 0.55rem;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.9);
}

/* Tier Status Text */
.tier-status[data-v-236c2807] {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-mute);
  padding: 4px;
  font-family: var(--mono);
}
.tier-status .fixed-status[data-v-236c2807] {
  color: var(--accent);
}

/* Multi-Tier Progress Bar Container */
.mt-viz-bar-container[data-v-236c2807] {
  position: relative;
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
}
.mt-viz-bar[data-v-236c2807] {
  position: relative;
  height: 2.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: visible;
}

/* Multi-Tier Zones */
.mt-zone[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.2s;
}
.mt-zone.loss-bg[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.1);
}
.mt-zone.tier-zone[data-v-236c2807] {
  background: var(--zone-color);
  opacity: 0.12;
}
.mt-zone.tier-zone.active[data-v-236c2807] {
  opacity: 0.3;
}
.mt-zone.profit-pre-tier[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.28);
}
.mt-zone.loss-zone[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.3);
}
.mt-zone.locked-zone[data-v-236c2807] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.32), rgba(var(--profit-rgb), 0.14));
}

/* Multi-Tier Markers */
.mt-marker[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transition: left 0.2s;
}
.mt-marker-label[data-v-236c2807] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
}
.mt-marker-label.top[data-v-236c2807] {
  top: -1rem;
}
.mt-marker-label.bottom[data-v-236c2807] {
  bottom: -1rem;
}
.mt-marker-label.faded[data-v-236c2807] {
  opacity: 0.5;
}

/* Tier Threshold Lines */
.mt-marker.tier-line[data-v-236c2807] {
  width: 2px;
  background: var(--tier-color, #3b82f6);
  opacity: 0.4;
}
.mt-marker.tier-line.active[data-v-236c2807] {
  opacity: 1;
}
.mt-marker.tier-line .mt-marker-label[data-v-236c2807] {
  color: var(--tier-text, #60a5fa);
}

/* Initial Stop */
.mt-marker.initial-stop[data-v-236c2807] {
  width: 3px;
  background: var(--loss);
  z-index: 10;
}
.mt-marker.initial-stop .mt-marker-label[data-v-236c2807] {
  color: var(--loss);
  font-weight: 500;
}

/* Trailing Stop */
.mt-marker.trailing-stop[data-v-236c2807] {
  width: 3px;
  background: var(--tier-color, #3b82f6);
  z-index: 10;
}
.mt-marker.trailing-stop .mt-marker-label[data-v-236c2807] {
  color: var(--tier-text, #60a5fa);
  font-weight: 500;
}

/* Entry Line */
.mt-marker.entry-line[data-v-236c2807] {
  width: 2px;
  background: var(--text-mute);
  z-index: 5;
}
.mt-marker.entry-line .mt-marker-label[data-v-236c2807] {
  color: var(--text-dim);
}

/* Peak Marker */
.mt-marker.peak-marker[data-v-236c2807] {
  width: 2px;
  background: rgba(var(--profit-rgb), 0.4);
}
.mt-marker.peak-marker .mt-marker-label[data-v-236c2807] {
  color: rgba(var(--profit-rgb), 0.7);
}

/* Current Price Marker */
.mt-marker.current-marker[data-v-236c2807] {
  width: 4px;
  border-radius: 2px;
  z-index: 15;
}
.mt-marker.current-marker.positive[data-v-236c2807] {
  background: var(--profit);
  box-shadow: 0 0 12px var(--profit);
}
.mt-marker.current-marker.positive .mt-marker-label[data-v-236c2807] {
  color: var(--profit);
  font-weight: 700;
}
.mt-marker.current-marker.negative[data-v-236c2807] {
  background: var(--loss);
  box-shadow: 0 0 12px var(--loss);
}
.mt-marker.current-marker.negative .mt-marker-label[data-v-236c2807] {
  color: var(--loss);
  font-weight: 700;
}

/* Multi-Tier Stats Cards (design .tc-stats) */
.mt-stats[data-v-236c2807] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mt-stats.mt-stats-fees[data-v-236c2807] {
  grid-template-columns: repeat(3, 1fr);
}
.mt-stat-card[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 7px 5px;
  text-align: center;
}
.mt-stat-label[data-v-236c2807] {
  display: block;
  font-size: 0.52rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 3px;
}
.mt-stat-value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}
.mt-stat-value.positive[data-v-236c2807] {
  color: var(--profit);
}
.mt-stat-value.negative[data-v-236c2807] {
  color: var(--loss);
}
.mt-stat-value.peak[data-v-236c2807] {
  color: var(--profit);
}
.mt-stat-value.neutral[data-v-236c2807] {
  color: var(--text-mute);
}

/* ========== OCO Order Visualization ========== */
.oco-viz[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* OCO Progress Bar Container */
.oco-bar-container[data-v-236c2807] {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}
.oco-bar[data-v-236c2807] {
  position: relative;
  height: 2.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: visible;
}

/* OCO Zones */
.oco-zone[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.2s var(--ease-out, ease);
}
.oco-zone.loss-zone-bg[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.12);
  border-radius: var(--radius-md, 12px) 0 0 var(--radius-md, 12px);
}
.oco-zone.profit-zone-bg[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.1);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
}
.oco-zone.current-profit[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.32);
}
.oco-zone.current-loss[data-v-236c2807] {
  background: rgba(var(--loss-rgb), 0.32);
}

/* OCO Markers */
.oco-marker[data-v-236c2807] {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
  transition: left 0.3s var(--ease-out, ease);
}
.oco-marker-label[data-v-236c2807] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
}
.oco-marker-label.top[data-v-236c2807] {
  top: -1rem;
}
.oco-marker-label.bottom[data-v-236c2807] {
  bottom: -1rem;
}

/* Stop Loss Marker */
.oco-marker.sl-marker[data-v-236c2807] {
  width: 3px;
  background: var(--loss);
}
.oco-marker.sl-marker .oco-marker-label[data-v-236c2807] {
  color: var(--loss);
}

/* Entry Marker */
.oco-marker.entry-marker[data-v-236c2807] {
  width: 2px;
  background: var(--text-mute);
  z-index: 5;
}
.oco-marker.entry-marker .oco-marker-label[data-v-236c2807] {
  color: var(--text-dim);
}

/* Take Profit Marker */
.oco-marker.tp-marker[data-v-236c2807] {
  width: 3px;
  background: var(--profit);
}
.oco-marker.tp-marker .oco-marker-label[data-v-236c2807] {
  color: var(--profit);
}

/* Current Price Marker */
.oco-marker.current-marker[data-v-236c2807] {
  width: 4px;
  border-radius: 2px;
  z-index: 10;
}
.oco-marker.current-marker.positive[data-v-236c2807] {
  background: var(--profit);
  box-shadow: 0 0 12px var(--profit);
}
.oco-marker.current-marker.positive .oco-marker-label[data-v-236c2807] {
  color: var(--profit);
  font-weight: 700;
}
.oco-marker.current-marker.negative[data-v-236c2807] {
  background: var(--loss);
  box-shadow: 0 0 12px var(--loss);
}
.oco-marker.current-marker.negative .oco-marker-label[data-v-236c2807] {
  color: var(--loss);
  font-weight: 700;
}

/* OCO Distance Progress Bars */
.oco-distances[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.oco-distance-row[data-v-236c2807] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.oco-distance-header[data-v-236c2807] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oco-distance-label[data-v-236c2807] {
  font-size: 0.64rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oco-distance-value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
}
.oco-distance-value.loss[data-v-236c2807] {
  color: var(--loss);
}
.oco-distance-value.profit[data-v-236c2807] {
  color: var(--profit);
}
.oco-distance-bar[data-v-236c2807] {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.oco-distance-fill[data-v-236c2807] {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s var(--ease-out, ease);
}
.oco-distance-fill.loss[data-v-236c2807] {
  background: linear-gradient(90deg, var(--loss), rgba(var(--loss-rgb), 0.45));
}
.oco-distance-fill.profit[data-v-236c2807] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.45), var(--profit));
}

/* OCO Stats Cards (design .tc-stats) */
.oco-stats[data-v-236c2807] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.oco-stats.oco-stats-fees[data-v-236c2807] {
  grid-template-columns: repeat(3, 1fr);
}
.oco-stat-card[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 7px 5px;
  text-align: center;
}
.oco-stat-label[data-v-236c2807] {
  display: block;
  font-size: 0.52rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 3px;
}
.oco-stat-value[data-v-236c2807] {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}
.oco-stat-value.positive[data-v-236c2807] {
  color: var(--profit);
}
.oco-stat-value.negative[data-v-236c2807] {
  color: var(--loss);
}
.oco-stat-value.loss[data-v-236c2807] {
  color: var(--loss);
}
.oco-stat-value.profit[data-v-236c2807] {
  color: var(--profit);
}

/* Close Trade Button — composes the shared .rd-tb-ghost ghost button
   (base look) with the destructive loss-accent hover, beta-dot, and
   spinner specific to this card. .tc-action-btn pins it to the right of
   the footer row (design .tc-actions). */
.tc-action-btn[data-v-236c2807] {
  margin-left: auto;
  white-space: nowrap;
  justify-content: center;
}
.close-trade-btn[data-v-236c2807]:hover:not(:disabled) {
  color: var(--loss);
  border-color: rgba(var(--loss-rgb), 0.5);
  background: rgba(var(--loss-rgb), 0.1);
}
.close-trade-btn .btn-spinner[data-v-236c2807] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--loss-rgb), 0.3);
  border-top-color: var(--loss);
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
}
.close-trade-btn.has-beta[data-v-236c2807] {
  position: relative;
}
.close-trade-btn .beta-dot[data-v-236c2807] {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 1px solid var(--panel-solid);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

/* Alert Copy Trade — STAX-only full-width row below the footer. Shares the
   trade into Copy Trade Stax. Accent-tinted hover/spinner to read as a positive
   broadcast, distinct from the destructive Close. */
.alert-copy-trade-btn[data-v-236c2807] {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.alert-copy-trade-btn[data-v-236c2807]:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}
.alert-copy-trade-btn .btn-spinner[data-v-236c2807] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--accent-rgb), 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
}

/* Detach ("Stop Copying") — full-width row below the footer, mirroring the
   Alert Copy Trade button's layout but with the amber "state change" palette of
   the Reverse button (this hands control to the member; it isn't destructive
   like Close). */
.detach-btn[data-v-236c2807] {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
}
.detach-btn[data-v-236c2807]:hover:not(:disabled) {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.2);
}
.detach-btn .btn-spinner[data-v-236c2807] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
}

/* Scale-in split-button cluster — same footer row as Close. Sits to the
 * left of the close button via margin-left:auto on .close-trade-btn. */
.scale-in-controls[data-v-236c2807] {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.scale-in-btn[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(var(--profit-rgb), 0.12);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-right: none;
  border-radius: 9px 0 0 9px;
  color: var(--profit);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s var(--ease-out, ease);
  white-space: nowrap;
}
.scale-in-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.25);
  border-color: rgba(var(--profit-rgb), 0.5);
}
.scale-in-btn[data-v-236c2807]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.scale-in-btn .btn-spinner[data-v-236c2807] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--profit-rgb), 0.3);
  border-top-color: var(--profit);
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
}
/* Reverse button — neutral/amber accent to read as "flip", distinct from the
   green scale-in and red close affordances. */
.reverse-btn[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 9px;
  color: #f59e0b;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s var(--ease-out, ease);
  white-space: nowrap;
}
.reverse-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.24);
  border-color: rgba(245, 158, 11, 0.55);
}
.reverse-btn[data-v-236c2807]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.reverse-btn .btn-spinner[data-v-236c2807] {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
}
.scale-in-limit-btn[data-v-236c2807] {
  padding: 7px 9px;
  background: rgba(var(--profit-rgb), 0.12);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-radius: 0 9px 9px 0;
  color: var(--profit);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s var(--ease-out, ease);
  line-height: 1;
}
.scale-in-limit-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.25);
  border-color: rgba(var(--profit-rgb), 0.5);
}
.scale-in-limit-btn[data-v-236c2807]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.scale-in-controls .scale-in-prefix[data-v-236c2807] {
  color: var(--profit);
  font-size: 0.8rem;
  margin-right: 2px;
}
.scale-in-input[data-v-236c2807] {
  width: 6ch;
  padding: 0.25rem 0.35rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.08);
  border: 1px solid rgba(var(--profit-rgb), 0.5);
  border-radius: 4px;
  outline: none;
}
.scale-in-input[data-v-236c2807]:focus {
  border-color: var(--profit);
  background: rgba(var(--profit-rgb), 0.12);
}
.scale-in-input[data-v-236c2807]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.scale-in-spinner[data-v-236c2807] {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: 2px solid rgba(var(--profit-rgb), 0.3);
  border-top-color: var(--profit);
  border-radius: 50%;
  animation: spin-236c2807 0.8s linear infinite;
  display: inline-block;
}
/* Inline commit / cancel buttons for the scale-in input — same rationale
 * as the stop pair (iOS numeric pad has no Return key). */
.scale-in-confirm-btn[data-v-236c2807],
.scale-in-cancel-btn[data-v-236c2807] {
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.5);
  color: var(--profit);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  margin-left: 2px;
  font-family: inherit;
}
.scale-in-confirm-btn[data-v-236c2807]:hover:not(:disabled),
.scale-in-cancel-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.28);
  border-color: rgba(var(--profit-rgb), 0.7);
}
.scale-in-cancel-btn[data-v-236c2807] { color: var(--text-dim); background: var(--panel-2); border-color: var(--border-strong);
}
.scale-in-cancel-btn[data-v-236c2807]:hover:not(:disabled) { background: var(--panel-solid); border-color: var(--border-strong); color: var(--text);
}
.scale-in-confirm-btn[data-v-236c2807]:disabled,
.scale-in-cancel-btn[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}
@keyframes spin-236c2807 {
to { transform: rotate(360deg);
}
}

/* ---- Auto-exit row ------------------------------------------------------
 * Full-width row below the footer. Wraps on narrow cards rather than
 * overflowing — the editing state carries a mode select plus two labelled
 * inputs, which is wider than a phone card. */
.auto-exit-row[data-v-236c2807] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.ae-label[data-v-236c2807] {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: help;
}
.ae-mode-select[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 4px;
  font-family: inherit;
  cursor: pointer;
}
.ae-mode-select[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}
.ae-field[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ae-field-label[data-v-236c2807] {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.ae-field-label.tp[data-v-236c2807] { color: var(--profit);
}
.ae-field-label.sl[data-v-236c2807] { color: var(--loss);
}
.ae-affix[data-v-236c2807] {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.ae-input[data-v-236c2807] {
  width: 68px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 2px 4px;
  font-family: inherit;
}
.ae-input[data-v-236c2807]:focus {
  outline: none;
  border-color: var(--accent);
}
.ae-input[data-v-236c2807]:disabled { opacity: 0.5;
}
.ae-btn[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  font-family: inherit;
}
.ae-btn[data-v-236c2807]:hover:not(:disabled) {
  background: var(--panel-solid);
  color: var(--text);
}
.ae-btn[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}
.ae-arm-btn[data-v-236c2807] {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.1);
}
.ae-arm-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.ae-clear-btn[data-v-236c2807]:hover:not(:disabled) { color: var(--loss);
}

/* Armed chips + their ±nudge steppers. */
.ae-adjust[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ae-chip[data-v-236c2807] {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.ae-chip.tp[data-v-236c2807] {
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.12);
  border: 1px solid rgba(var(--profit-rgb), 0.4);
}
.ae-chip.sl[data-v-236c2807] {
  color: var(--loss);
  background: rgba(var(--loss-rgb), 0.12);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
}
.ae-stepper[data-v-236c2807] {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.ae-step-btn[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: 2px;
  font-size: 0.5rem;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
  font-family: inherit;
}
.ae-step-btn[data-v-236c2807]:hover:not(:disabled) {
  background: var(--panel-solid);
  color: var(--text);
}
.ae-step-btn[data-v-236c2807]:disabled { opacity: 0.4; cursor: not-allowed;
}

/* ---- Auto Scale-In row --------------------------------------------------
 * Twin of the auto-exit row above, one row lower and laid out the same way
 * (wraps on a narrow card rather than overflowing). Profit-tinted instead of
 * accent-tinted so it reads as a sibling of the "+ Scale In" button in the
 * footer — which is exactly what it automates — and never gets mistaken for
 * the auto-exit controls stacked directly above it. */
.auto-scale-in-row[data-v-236c2807] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.asi-label[data-v-236c2807] {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: help;
}
.asi-mode-select[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 4px;
  font-family: inherit;
  cursor: pointer;
}
.asi-mode-select[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}
.asi-field[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.asi-affix[data-v-236c2807] {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.asi-input[data-v-236c2807] {
  width: 68px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.75rem;
  padding: 2px 4px;
  font-family: inherit;
}
.asi-input[data-v-236c2807]:focus {
  outline: none;
  border-color: var(--profit);
}
.asi-input[data-v-236c2807]:disabled { opacity: 0.5;
}
/* Direction preview while typing — quiet, it's guidance, not a value. */
.asi-hint[data-v-236c2807] {
  font-size: 0.65rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.asi-btn[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  cursor: pointer;
  font-family: inherit;
}
.asi-btn[data-v-236c2807]:hover:not(:disabled) {
  background: var(--panel-solid);
  color: var(--text);
}
.asi-btn[data-v-236c2807]:disabled { opacity: 0.5; cursor: not-allowed;
}
.asi-arm-btn[data-v-236c2807] {
  color: var(--profit);
  border-color: rgba(var(--profit-rgb), 0.4);
  background: rgba(var(--profit-rgb), 0.1);
}
.asi-arm-btn[data-v-236c2807]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
}
.asi-clear-btn[data-v-236c2807]:hover:not(:disabled) { color: var(--loss);
}

/* Armed chip + its ±nudge stepper. The chip carries a whole sentence rather
   than a bare number, so it's allowed to wrap on a phone-width card. */
.asi-adjust[data-v-236c2807] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.asi-chip[data-v-236c2807] {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.12);
  border: 1px solid rgba(var(--profit-rgb), 0.4);
}
.asi-stepper[data-v-236c2807] {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.asi-step-btn[data-v-236c2807] {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: 2px;
  font-size: 0.5rem;
  line-height: 1;
  padding: 1px 3px;
  cursor: pointer;
  font-family: inherit;
}
.asi-step-btn[data-v-236c2807]:hover:not(:disabled) {
  background: var(--panel-solid);
  color: var(--text);
}
.asi-step-btn[data-v-236c2807]:disabled { opacity: 0.4; cursor: not-allowed;
}

/* Connection chip in the page header. Default rd-chip-live is accent (Connected);
   the disconnected state flips it to the loss color and stills the pulse. */
.conn-chip.disconnected[data-v-1d6c0705] {
  color: var(--loss);
}
.conn-chip .rd-pulse-dot.off[data-v-1d6c0705] {
  background: var(--loss);
}
.conn-chip .rd-pulse-dot.off[data-v-1d6c0705]::after {
  animation: none;
  opacity: 0;
}

/* Two-up Killswitch + Intraday panel row. The panels carry explicit
   grid-column span styles; the shared rd-grid responsive rule collapses them. */
.trades-top-grid[data-v-1d6c0705] {
  align-items: stretch;
}
.ks-panel[data-v-1d6c0705],
.intraday-chart-section[data-v-1d6c0705] {
  display: flex;
  flex-direction: column;
}
.ks-panel .rd-panel-head[data-v-1d6c0705],
.intraday-chart-section .rd-panel-head[data-v-1d6c0705] {
  flex-wrap: wrap;
}

/* Killswitch Day-Lock Banner */
.ks-lock-banner[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(var(--loss-rgb), 0.18), rgba(127, 29, 29, 0.28));
  border: 1px solid rgba(var(--loss-rgb), 0.55);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  color: #fee2e2;
}
.ks-lock-icon[data-v-1d6c0705] {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

/* Calmer, non-alarming counterpart to the red lock banner: the killswitch has
   been unlocked for the rest of today. */
.ks-override-note[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(var(--profit-rgb), 0.12), rgba(var(--profit-rgb), 0.06));
  border: 1px solid rgba(var(--profit-rgb), 0.4);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}
.ks-override-icon[data-v-1d6c0705] {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.ks-lock-body[data-v-1d6c0705] {
  flex: 1;
  min-width: 0;
}
.ks-lock-title[data-v-1d6c0705] {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #fef2f2;
}
.ks-lock-detail[data-v-1d6c0705] {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #fecaca;
}
.ks-lock-detail strong[data-v-1d6c0705] {
  color: #fff;
  font-weight: 600;
}
.ks-unlock-btn[data-v-1d6c0705] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #b91c1c;
  color: #fff;
  border: 1px solid var(--loss);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ks-unlock-btn[data-v-1d6c0705]:hover:not(:disabled) {
  background: var(--loss);
}
.ks-unlock-btn[data-v-1d6c0705]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Killswitch Card — now rendered inside an rd-panel (.rd-panel-pad supplies the
   chrome), so the inner block carries no panel background/border of its own. */
.ks-card[data-v-1d6c0705] {
  margin: 0;
}
.ks-header[data-v-1d6c0705] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ks-header-left[data-v-1d6c0705] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ks-header-right[data-v-1d6c0705] {
  text-align: right;
}
.ks-header-right.dual[data-v-1d6c0705] {
  display: flex;
  gap: 24px;
}
.ks-target-group[data-v-1d6c0705] {
  text-align: right;
}
.ks-label[data-v-1d6c0705] {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
  margin-bottom: 2px;
}
.ks-value[data-v-1d6c0705] {
  font-size: 28px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.1;
}
.ks-value.profit[data-v-1d6c0705] {
  color: var(--profit);
}
.ks-value.loss[data-v-1d6c0705] {
  color: var(--loss);
}
.ks-target[data-v-1d6c0705] {
  font-size: 18px;
  font-weight: 600;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.ks-target.profit[data-v-1d6c0705] {
  color: var(--profit);
}
.ks-target.loss[data-v-1d6c0705] {
  color: var(--loss);
}

/* Track */
.ks-track[data-v-1d6c0705] {
  position: relative;
  height: 24px;
  background: #1e293b;
  border-radius: 6px;
  overflow: hidden;
}
.ks-track.loss-mode[data-v-1d6c0705] {
  /* Loss mode has fills positioned from right */
}
.ks-track.dual-mode[data-v-1d6c0705] {
  overflow: visible;
}

/* Fills */
.ks-fill[data-v-1d6c0705] {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ks-fill.profit[data-v-1d6c0705] {
  left: 0;
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.08), var(--profit));
  border-radius: 6px 0 0 6px;
}
.ks-fill.profit.complete[data-v-1d6c0705] {
  box-shadow: 0 0 20px rgba(var(--profit-rgb), 0.25);
}
.ks-fill.loss[data-v-1d6c0705] {
  right: 0;
  background: linear-gradient(270deg, var(--loss), rgba(var(--loss-rgb), 0.4));
  border-radius: 0 6px 6px 0;
}
.ks-fill.loss.triggered[data-v-1d6c0705] {
  box-shadow: 0 0 20px rgba(var(--loss-rgb), 0.25);
}
.ks-fill.dual[data-v-1d6c0705] {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ks-fill.dual.profit[data-v-1d6c0705] {
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.3), var(--profit));
  box-shadow: 0 0 16px rgba(var(--profit-rgb), 0.25);
  border-radius: 0;
}
.ks-fill.dual.loss[data-v-1d6c0705] {
  background: linear-gradient(270deg, rgba(var(--loss-rgb), 0.3), var(--loss));
  box-shadow: 0 0 16px rgba(var(--loss-rgb), 0.25);
  border-radius: 0;
}

/* Remaining budget (loss mode) */
.ks-remaining[data-v-1d6c0705] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.15), #334155);
  border-radius: 6px 0 0 6px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ks-remaining.danger[data-v-1d6c0705] {
  background: linear-gradient(90deg, #334155, #334155);
}

/* Patterns for edge states */
.ks-negative-pattern[data-v-1d6c0705] {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(var(--loss-rgb), 0.08) 8px, rgba(var(--loss-rgb), 0.08) 16px);
}
.ks-positive-pattern[data-v-1d6c0705] {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.08), rgba(var(--profit-rgb), 0.15));
}

/* Percentage label inside track */
.ks-pct-label[data-v-1d6c0705] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  white-space: nowrap;
  z-index: 1;
}
.ks-pct-label.negative[data-v-1d6c0705] {
  color: var(--loss);
}

/* Zero line (dual mode) */
.ks-zero-line[data-v-1d6c0705] {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #e2e8f0;
  z-index: 2;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.4);
}

/* Position marker (dual mode) */
.ks-position-marker[data-v-1d6c0705] {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 32px;
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 3;
  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ks-position-marker.profit[data-v-1d6c0705] {
  background: var(--profit);
  box-shadow: 0 0 10px rgba(var(--profit-rgb), 0.5);
}
.ks-position-marker.loss[data-v-1d6c0705] {
  background: var(--loss);
  box-shadow: 0 0 10px rgba(var(--loss-rgb), 0.5);
}

/* Scale */
.ks-scale[data-v-1d6c0705] {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: #475569;
}
.ks-scale.dual[data-v-1d6c0705] {
  position: relative;
}
.ks-scale .profit[data-v-1d6c0705] {
  color: var(--profit);
}
.ks-scale .loss[data-v-1d6c0705] {
  color: var(--loss);
}
.ks-scale .zero[data-v-1d6c0705] {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 600;
  color: #e2e8f0;
}

/* Basis caption — explains what the live P&L number includes (closed + open,
   before fees) so it reconciles against the header banner's fee-adjusted Net. */
.ks-basis[data-v-1d6c0705] {
  margin-top: 10px;
  font-size: 11px;
  color: #64748b;
  text-align: center;
  cursor: help;
}

/* Portal/engine divergence chip — shown when the portal's realized total and
   the engine's killswitch accumulator disagree by more than $1 (broker
   corrections / backfills). Styled like a warning badge; help cursor because
   the title attribute carries the explanation. */
.ks-divergence[data-v-1d6c0705] {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  cursor: help;
}
.ks-divergence-icon[data-v-1d6c0705] {
  font-size: 14px;
}

/* Badges */
.ks-badge[data-v-1d6c0705] {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}
.ks-badge.success[data-v-1d6c0705] {
  background: rgba(var(--profit-rgb), 0.08);
  border: 1px solid rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
}
.ks-badge.warning[data-v-1d6c0705] {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.ks-badge.danger[data-v-1d6c0705] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  color: var(--loss);
}
.ks-badge-icon[data-v-1d6c0705] {
  font-size: 14px;
}

/* Distance badges (dual mode) */
.ks-distance-badges[data-v-1d6c0705] {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.ks-distance[data-v-1d6c0705] {
  flex: 1;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.ks-distance.loss[data-v-1d6c0705] {
  background: rgba(var(--loss-rgb), 0.08);
  color: var(--loss);
}
.ks-distance.profit[data-v-1d6c0705] {
  background: rgba(var(--profit-rgb), 0.08);
  color: var(--profit);
}
.error-banner[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  color: var(--loss);
}
.retry-btn[data-v-1d6c0705] {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--loss);
  border-radius: 4px;
  color: var(--loss);
  cursor: pointer;
  transition: background 0.2s;
}
.retry-btn[data-v-1d6c0705]:hover {
  background: rgba(var(--loss-rgb), 0.1);
}
.skip-day-banner[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.skip-icon[data-v-1d6c0705] {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.skip-info[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.skip-info strong[data-v-1d6c0705] {
  color: #f59e0b;
  font-size: 0.9rem;
}
.skip-info span[data-v-1d6c0705] {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Per-filter active-position count inside each rd-seg-btn. Sits to the right of
   the label; uses the loss accent like the nav badge for at-a-glance visibility. */
.seg-count[data-v-1d6c0705] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  background: rgba(var(--loss-rgb), 0.85);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
}

/* Strategy select carries a leading color dot for the picked strategy. The dot
   is absolutely positioned inside the rd-select-wrap, with extra left padding on
   the select so the text clears it. */
.strategy-filter-bar[data-v-1d6c0705] {
  position: relative;
}
.strategy-filter-dot[data-v-1d6c0705] {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
  pointer-events: none;
}
.strategy-filter-bar:has(.strategy-filter-dot) .strategy-filter-select[data-v-1d6c0705] {
  padding-left: 28px;
}
.trades-section[data-v-1d6c0705] {
  margin-bottom: 2rem;
}

/* Section headers (Active Positions / Completed Today) — panel-tick + title +
   count pill, with an optional live chip pushed to the right. */
.rd-section-h2[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.rd-section-h2 .rd-panel-tick[data-v-1d6c0705] {
  height: 16px;
}
.rd-section-h2 .section-count[data-v-1d6c0705] {
  font-family: var(--mono);
}
.rd-section-h2 .section-live[data-v-1d6c0705] {
  margin-left: auto;
}
.empty-state[data-v-1d6c0705] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: var(--panel-solid);
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}
.empty-icon[data-v-1d6c0705] {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.empty-state p[data-v-1d6c0705] {
  margin: 0;
  color: var(--text-mute);
  font-size: 1rem;
}
.empty-state small[data-v-1d6c0705] {
  margin-top: 0.5rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.trades-grid[data-v-1d6c0705] {
  display: grid;
  /* Card minimum bumped from 340px → 380px so multi-leg exit rows
     (tag, qty, TP, SL, badge, ×) fit on one line on wide screens.
     auto-fill + 1fr keeps cards growing to fill the row, and the
     768px breakpoint below collapses to single-column on mobile. */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem;
}
.trades-grid.completed[data-v-1d6c0705] {
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
.trades-grid[data-v-1d6c0705] {
    grid-template-columns: 1fr;
}
}

/* Push the Cards/List toggle to the right of the toolbar. */
.trades-viewmode[data-v-1d6c0705] { margin-left: auto;
}

/* ─── Live Trades LIST / table view ─────────────────────────────────────
   Dense alternative to the card grid: one aligned row per trade with a
   click-to-expand drawer holding the full <TradeCard> (unchanged). The
   columnar grid reads like a table on desktop and collapses to labelled
   stacked cells on mobile — no horizontal scroll. */
.trades-list[data-v-1d6c0705] { display: flex; flex-direction: column; gap: 0.4rem;
}

/* Shared column template so the header labels and every row line up. */
.tc-list-head[data-v-1d6c0705],
.tc-list-summary[data-v-1d6c0705] {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.7fr)  /* ticker */
    minmax(54px, 0.9fr)   /* entry  */
    minmax(54px, 0.9fr)   /* price / exit */
    minmax(90px, 1.2fr)   /* p&l    */
    minmax(54px, 0.9fr)   /* stop   */
    minmax(54px, 0.9fr)   /* target */
    minmax(78px, 1fr)     /* status */
    22px;                 /* caret  */
  align-items: center;
  gap: 0.5rem;
}
.tc-list-head[data-v-1d6c0705] {
  padding: 0.2rem 0.85rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.tc-list-head .tcl-col-num[data-v-1d6c0705] { text-align: right;
}

/* Row shell — provides the outer chrome; the nested TradeCard's own border /
   radius are stripped so the expanded drawer blends in (no double border). */
.tc-list-item[data-v-1d6c0705] {
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tc-list-item.tc-status-active[data-v-1d6c0705] { border-left: 3px solid var(--profit);
}
.tc-list-item[data-v-1d6c0705] >  .trade-card { border: none; border-radius: 0;
}
.tc-list-summary[data-v-1d6c0705] {
  width: 100%;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--text);
  text-align: left;
}
.tc-list-summary[data-v-1d6c0705]:hover { background: rgba(var(--accent-rgb), 0.06);
}
.tc-list-summary[data-v-1d6c0705]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
}
.tc-list-item.managing .tc-list-summary[data-v-1d6c0705] {
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px dashed var(--border);
}
.tc-list-summary .tcl-cell[data-v-1d6c0705] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-list-summary .tcl-col-num[data-v-1d6c0705] { text-align: right;
}
.tc-list-summary .tcl-col-ticker[data-v-1d6c0705] { font-family: var(--display); font-weight: 700; white-space: normal; overflow: visible;
}
.tc-list-summary .tcl-col-status[data-v-1d6c0705] { display: inline-flex; align-items: center; gap: 0.35rem; white-space: normal; overflow: visible;
}
.tc-list-summary .tcl-col-caret[data-v-1d6c0705] { text-align: center; color: var(--text-dim);
}
.tc-list-summary .tcl-pnl.pnl-pos[data-v-1d6c0705] { color: var(--profit);
}
.tc-list-summary .tcl-pnl.pnl-neg[data-v-1d6c0705] { color: var(--loss);
}
.tc-list-summary .tcl-pct[data-v-1d6c0705] { margin-left: 0.3rem; font-size: 0.72rem; opacity: 0.8;
}

/* Status pill (reuses the .rd-pill base). */
.tc-status-pill[data-v-1d6c0705] { text-transform: uppercase; font-size: 0.62rem;
}
.tc-status-pill.tc-status-active[data-v-1d6c0705] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.tc-status-pill.tc-status-pending[data-v-1d6c0705],
.tc-status-pill.tc-status-filled[data-v-1d6c0705] { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-2);
}
.tc-status-pill.tc-status-completed[data-v-1d6c0705] { background: var(--panel-2); color: var(--text-dim);
}

/* Mobile: drop the column header and stack each row into labelled cells. */
@media (max-width: 768px) {
.tc-list-head[data-v-1d6c0705] { display: none;
}
.tc-list-summary[data-v-1d6c0705] {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.9rem;
    padding: 0.65rem 2.1rem 0.65rem 0.85rem;
}
.tc-list-summary .tcl-col-num[data-v-1d6c0705] { text-align: left;
}
.tc-list-summary .tcl-cell[data-v-1d6c0705]:not(.tcl-col-ticker):not(.tcl-col-status)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin-bottom: 0.05rem;
}
.tc-list-summary .tcl-col-ticker[data-v-1d6c0705],
  .tc-list-summary .tcl-col-status[data-v-1d6c0705] { grid-column: 1 / -1;
}
.tc-list-summary .tcl-col-caret[data-v-1d6c0705] {
    position: absolute; top: 0.65rem; right: 0.85rem;
    grid-column: auto; margin: 0;
}
}

/* Flatten All Button */
@keyframes spin-1d6c0705 {
to { transform: rotate(360deg);
}
}

/* Modal Overlay */
.modal-overlay[data-v-1d6c0705] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

/* Modal Base Styles */
.close-trade-modal[data-v-1d6c0705] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  animation: modalSlideIn-1d6c0705 0.2s ease-out;
}
@keyframes modalSlideIn-1d6c0705 {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-close-x[data-v-1d6c0705] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}
.modal-close-x[data-v-1d6c0705]:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.modal-title[data-v-1d6c0705] {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #fff;
}
.modal-body[data-v-1d6c0705] {
  margin-bottom: 1.5rem;
}
.modal-footer[data-v-1d6c0705] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Close Trade Modal Details */
.close-trade-details[data-v-1d6c0705] {
  background: #16161f;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.detail-row[data-v-1d6c0705] {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.detail-row[data-v-1d6c0705]:last-child {
  border-bottom: none;
}
.detail-label[data-v-1d6c0705] {
  color: var(--text-mute);
  font-size: 0.875rem;
}
.detail-value[data-v-1d6c0705] {
  color: #fff;
  font-weight: 500;
}
.detail-value.ticker[data-v-1d6c0705] {
  color: var(--accent);
}
.detail-value.positive[data-v-1d6c0705] {
  color: var(--profit);
}
.detail-value.negative[data-v-1d6c0705] {
  color: var(--loss);
}
.close-warning[data-v-1d6c0705] {
  margin: 0;
  padding: 0.75rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.2);
  border-radius: 6px;
  color: var(--loss);
  font-size: 0.875rem;
  text-align: center;
}

/* Modal Buttons */
.btn-cancel[data-v-1d6c0705] {
  padding: 0.6rem 1.2rem;
  background: var(--border);
  border: none;
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-cancel[data-v-1d6c0705]:hover:not(:disabled) {
  background: var(--border-strong);
  color: #fff;
}
.btn-cancel[data-v-1d6c0705]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-close-trade[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--loss);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-close-trade[data-v-1d6c0705]:hover:not(:disabled) {
  background: var(--loss);
}
.btn-close-trade[data-v-1d6c0705]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-close-trade .btn-spinner[data-v-1d6c0705] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-1d6c0705 0.8s linear infinite;
}

/* Toast Notification */
.toast[data-v-1d6c0705] {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 1100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.toast.success[data-v-1d6c0705] {
  background: var(--profit);
  color: #fff;
}
.toast.error[data-v-1d6c0705] {
  background: var(--loss);
  color: #fff;
}
.toast.warn[data-v-1d6c0705] {
  background: #f59e0b;
  color: #1f2937;
}
.toast-enter-active[data-v-1d6c0705],
.toast-leave-active[data-v-1d6c0705] {
  transition: all 0.3s ease;
}
.toast-enter-from[data-v-1d6c0705],
.toast-leave-to[data-v-1d6c0705] {
  opacity: 0;
  transform: translateY(20px);
}

/* View As dropdown */
.view-as-container[data-v-1d6c0705] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.view-as-label[data-v-1d6c0705] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}
.view-as-select[data-v-1d6c0705] {
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-width: 180px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.view-as-select[data-v-1d6c0705]:hover {
  border-color: var(--accent);
}
.view-as-select[data-v-1d6c0705]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
.view-as-select[data-v-1d6c0705]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.viewing-as-badge[data-v-1d6c0705] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Trade card wrapper for settings button.  Stretches to the grid row height
   so the inner .trade-card (which uses height:100%) renders uniformly with
   sibling cards that are placed directly in the grid. */
.trade-card-wrapper[data-v-1d6c0705] {
  display: flex;
  height: 100%;
}
.trade-card-wrapper[data-v-1d6c0705] >  .trade-card {
  flex: 1;
}
.card-settings-btn[data-v-1d6c0705] {
  margin-left: 0.4rem;
  vertical-align: middle;
}
.settings-btn[data-v-1d6c0705] {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: 0.35rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-btn[data-v-1d6c0705]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.5);
}
.settings-btn.disabled[data-v-1d6c0705] {
  opacity: 0.3;
  cursor: not-allowed;
}

.pnl-calendar-page[data-v-c46657c4] {
  padding: 1.5rem 2rem;
}
.positive[data-v-c46657c4] { color: var(--profit);
}
.negative[data-v-c46657c4] { color: var(--loss);
}

/* ---- header month-nav ---- */
.cal-monthnav[data-v-c46657c4] {
  align-items: center;
}
.cal-monthnav .rd-seg-btn[data-v-c46657c4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.month-label[data-v-c46657c4] {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 116px;
  text-align: center;
  padding: 0 6px;
}

/* keep the strategy multi-select aligned in the rd-toolbar */
.cal-strat-select[data-v-c46657c4] {
  display: inline-flex;
}

/* ---- charts ---- */
/* Standalone Subscription Payoff card on the Calendar — match the page's 14px
   section rhythm below it (the dashboard grid spaces its copy via grid gap, so
   the margin is scoped to this page rather than baked into the component). */
.cal-payoff[data-v-c46657c4] {
  margin-bottom: 14px;
}
.charts-section[data-v-c46657c4] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.chart-card[data-v-c46657c4] {
  display: flex;
  flex-direction: column;
}
.chart-card-wide[data-v-c46657c4] {
  grid-column: span 3;
}
.chart-card .rd-panel-head[data-v-c46657c4] {
  flex-wrap: wrap;
  align-items: center;
}
.chart-body[data-v-c46657c4] {
  position: relative;
  height: 220px;
}
.chart-body-donut[data-v-c46657c4] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut-center-stat[data-v-c46657c4] {
  position: absolute;
  top: calc(44% + 9px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.donut-center-value[data-v-c46657c4] {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.donut-center-label[data-v-c46657c4] {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
.chart-empty[data-v-c46657c4] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 1024px) {
.charts-section[data-v-c46657c4] {
    grid-template-columns: 1fr 1fr;
}
.chart-card-wide[data-v-c46657c4] {
    grid-column: span 2;
}
}
@media (max-width: 640px) {
.charts-section[data-v-c46657c4] {
    grid-template-columns: 1fr;
}
.chart-card-wide[data-v-c46657c4] {
    grid-column: span 1;
}
.chart-body[data-v-c46657c4] {
    height: 200px;
}
}

/* ---- calendar heatmap + weekly totals layout ---- */
.cal-layout[data-v-c46657c4] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px) {
.cal-layout[data-v-c46657c4] {
    grid-template-columns: 1fr;
}
}
.monthly-pnl[data-v-c46657c4] {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
}
.calendar-grid[data-v-c46657c4] {
  overflow-x: auto;
}
.cal-dow[data-v-c46657c4] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.cal-dow span[data-v-c46657c4] {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-grid[data-v-c46657c4] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.calendar-day[data-v-c46657c4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  min-height: 72px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: transform 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.calendar-day[data-v-c46657c4]:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.calendar-day.outside-month[data-v-c46657c4] {
  opacity: 0.3;
}
.calendar-day.is-today[data-v-c46657c4] {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* On colored heatmap cells the card background already signals profit/loss,
   so keep all text bright/near-white with a subtle shadow for contrast
   instead of color-on-same-color (which collapsed on high-intensity cells). */
.calendar-day.profit-day .cal-d[data-v-c46657c4],
.calendar-day.loss-day .cal-d[data-v-c46657c4],
.calendar-day.profit-day .cal-pnl[data-v-c46657c4],
.calendar-day.loss-day .cal-pnl[data-v-c46657c4] {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.calendar-day.profit-day .cal-trades[data-v-c46657c4],
.calendar-day.loss-day .cal-trades[data-v-c46657c4] {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.calendar-day.skip-day[data-v-c46657c4] {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(var(--accent-rgb), 0.08) 4px,
      rgba(var(--accent-rgb), 0.08) 8px
    ),
    var(--panel-2);
}
.calendar-day.skip-day .cal-d[data-v-c46657c4] {
  color: var(--text-dim);
}
.skip-label[data-v-c46657c4] {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.skip-event-label[data-v-c46657c4] {
  font-size: 0.55rem;
  color: var(--text-dim);
  opacity: 0.7;
  line-height: 1.1;
  text-align: center;
}
.cal-d[data-v-c46657c4] {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.cal-pnl[data-v-c46657c4] {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.cal-trades[data-v-c46657c4] {
  font-size: 0.6rem;
  color: var(--text-mute);
}

/* ---- weekly totals ---- */
.week-list[data-v-c46657c4] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}
.week-row[data-v-c46657c4] {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  grid-template-areas:
    'lbl bar pnl'
    'lbl bar wl';
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
.week-lbl[data-v-c46657c4] {
  grid-area: lbl;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
}
.week-bar[data-v-c46657c4] {
  grid-area: bar;
  height: 8px;
}
.rd-ui-bar-fill.fill-up[data-v-c46657c4] { background: var(--profit);
}
.rd-ui-bar-fill.fill-dn[data-v-c46657c4] { background: var(--loss);
}
.week-pnl[data-v-c46657c4] {
  grid-area: pnl;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}
.week-wl[data-v-c46657c4] {
  grid-area: wl;
  font-size: 0.62rem;
  color: var(--text-mute);
  font-weight: 500;
  text-align: right;
}
.week-row .no-data[data-v-c46657c4] {
  grid-area: pnl;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-mute);
  text-align: right;
}
@media (max-width: 768px) {
.pnl-calendar-page[data-v-c46657c4] {
    padding: 1rem;
}
}

.modal-overlay[data-v-d5df9024] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.fills-modal[data-v-d5df9024] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}
.modal-close-x[data-v-d5df9024] {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.modal-close-x[data-v-d5df9024]:hover { color: #fff;
}
.modal-title[data-v-d5df9024] { color: #fff; margin: 0 0 0.15rem; font-size: 1.1rem;
}
.modal-sub[data-v-d5df9024] { color: var(--text-mute); margin: 0 0 1rem; font-size: 0.85rem;
}
.net-grid[data-v-d5df9024] { display: grid; grid-template-columns: 1fr; gap: 0.75rem;
}
.net-field[data-v-d5df9024] { display: flex; flex-direction: column; gap: 0.35rem;
}
.net-label[data-v-d5df9024] { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.net-input-row[data-v-d5df9024] { display: flex; align-items: center; gap: 0.5rem;
}
.dollar[data-v-d5df9024] { color: var(--text-mute);
}
.net-input-row input[data-v-d5df9024] { flex: 1; min-width: 0;
}
input[type='number'][data-v-d5df9024] {
  background: var(--bg-1, #12151c);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  padding: 0.45rem 0.55rem;
  font-size: 0.9rem;
  width: 100%;
}
input[type='number'][data-v-d5df9024]:focus { outline: none; border-color: var(--accent);
}
.effect-toggle[data-v-d5df9024] { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.effect-toggle button[data-v-d5df9024] {
  background: transparent; border: none; color: var(--text-mute);
  padding: 0.4rem 0.6rem; font-size: 0.78rem; cursor: pointer;
}
.effect-toggle button.active[data-v-d5df9024] { background: rgba(var(--accent-rgb), 0.2); color: var(--accent);
}
.auto-hint[data-v-d5df9024] { color: var(--text-mute); font-size: 0.75rem; margin: 0.5rem 0 0.75rem;
}
.legs-editor[data-v-d5df9024] { border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.legs-editor-head[data-v-d5df9024], .legs-editor-row[data-v-d5df9024] {
  display: grid; grid-template-columns: 3rem 1fr 5.5rem 5.5rem; gap: 0.5rem;
  align-items: center; padding: 0.45rem 0.6rem;
}
.legs-editor-head[data-v-d5df9024] { background: rgba(255,255,255,0.03); color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase;
}
.legs-editor-row + .legs-editor-row[data-v-d5df9024] { border-top: 1px solid var(--border);
}
.leg-side-badge[data-v-d5df9024] { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 4px; text-align: center;
}
.leg-side-badge.sell[data-v-d5df9024] { background: rgba(var(--accent-rgb), 0.15); color: var(--accent);
}
.leg-side-badge.buy[data-v-d5df9024] { background: rgba(255,255,255,0.08); color: var(--text-dim);
}
.leg-symbol[data-v-d5df9024] { font-size: 0.8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leg-price[data-v-d5df9024] { display: flex; align-items: center; gap: 0.25rem;
}
.leg-price input[data-v-d5df9024] { padding: 0.3rem 0.4rem; font-size: 0.82rem;
}
.preview[data-v-d5df9024] {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 1rem 0 0.25rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: 8px;
}
.preview.win[data-v-d5df9024] { border-color: rgba(0,200,120,0.4);
}
.preview.loss[data-v-d5df9024] { border-color: rgba(255,90,90,0.4);
}
.preview-label[data-v-d5df9024] { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase;
}
.preview-outcome[data-v-d5df9024] { font-weight: 700;
}
.preview.win .preview-outcome[data-v-d5df9024], .preview.win .preview-pnl[data-v-d5df9024] { color: var(--profit);
}
.preview.loss .preview-outcome[data-v-d5df9024], .preview.loss .preview-pnl[data-v-d5df9024] { color: var(--loss);
}
.preview-pnl[data-v-d5df9024] { margin-left: auto; font-weight: 600;
}
.preview-pnl small[data-v-d5df9024] { color: var(--text-mute); font-weight: 400;
}
.preview-empty[data-v-d5df9024] { color: var(--text-mute); font-size: 0.82rem;
}
.callout[data-v-d5df9024] { font-size: 0.78rem; border-radius: 6px; padding: 0.5rem 0.65rem; margin: 0.6rem 0 0;
}
.callout.note[data-v-d5df9024] { background: rgba(255,255,255,0.04); color: var(--text-mute);
}
.callout.warn[data-v-d5df9024] { background: rgba(240,180,40,0.12); color: #f0b428;
}
.callout.error[data-v-d5df9024] { background: rgba(255,90,90,0.12); color: var(--loss);
}
.modal-actions[data-v-d5df9024] { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem;
}
.btn[data-v-d5df9024] { border-radius: 6px; padding: 0.5rem 1.1rem; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--border);
}
.btn.ghost[data-v-d5df9024] { background: transparent; color: var(--text-dim);
}
.btn.ghost[data-v-d5df9024]:hover:not(:disabled) { background: var(--border);
}
.btn.primary[data-v-d5df9024] { background: var(--accent); color: #06121f; border-color: var(--accent); font-weight: 600;
}
.btn.primary[data-v-d5df9024]:disabled { opacity: 0.5; cursor: not-allowed;
}

.reconcile-overlay[data-v-440cb173] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.reconcile-card[data-v-440cb173] {
  width: min(760px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1, #14171d);
  border: 1px solid var(--border-1, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.reconcile-header[data-v-440cb173] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border-1, rgba(255, 255, 255, 0.08));
}
.reconcile-title[data-v-440cb173] { margin: 0; font-size: 1.15rem; font-weight: 700;
}
.reconcile-sub[data-v-440cb173] { margin: 0.35rem 0 0; font-size: 0.82rem; opacity: 0.7; max-width: 60ch;
}
.reconcile-x[data-v-440cb173] { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; opacity: 0.6;
}
.reconcile-x[data-v-440cb173]:hover { opacity: 1;
}
.reconcile-body[data-v-440cb173] { overflow-y: auto; padding: 0.5rem 0.75rem;
}
.reconcile-section[data-v-440cb173] { margin-bottom: 1.25rem;
}
.section-heading[data-v-440cb173] { margin: 0.6rem 0.6rem 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7;
}
.section-note[data-v-440cb173] { margin: 0 0.6rem 0.5rem; font-size: 0.78rem; opacity: 0.6;
}
.matched-note[data-v-440cb173] {
  margin: 0.2rem 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 6px;
  color: var(--cat-green, #30a46c);
  background: rgba(var(--cat-green-rgb), 0.08);
  border: 1px solid rgba(var(--cat-green-rgb), 0.22);
}
.reconcile-state[data-v-440cb173] { padding: 2rem 1rem; text-align: center; opacity: 0.75;
}
.reconcile-state.error[data-v-440cb173] { color: var(--cat-red, #e5484d);
}
.reconcile-table[data-v-440cb173] { width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.reconcile-table th[data-v-440cb173] {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  border-bottom: 1px solid var(--border-1, rgba(255, 255, 255, 0.08));
}
.reconcile-table td[data-v-440cb173] { padding: 0.6rem; border-bottom: 1px solid var(--border-1, rgba(255, 255, 255, 0.05)); vertical-align: top;
}
.col-check[data-v-440cb173] { width: 2rem;
}
.trade-ticker[data-v-440cb173] { font-weight: 700; display: block;
}
.trade-id[data-v-440cb173] { font-size: 0.7rem; opacity: 0.5; font-family: ui-monospace, monospace;
}
.col-change[data-v-440cb173] { display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.change-chip[data-v-440cb173] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  background: rgba(var(--cat-green-rgb), 0.1);
  border: 1px solid rgba(var(--cat-green-rgb), 0.25);
  font-size: 0.78rem;
}
.change-chip.added[data-v-440cb173] { background: rgba(var(--cat-blue-rgb), 0.1); border-color: rgba(var(--cat-blue-rgb), 0.25);
}
.change-label[data-v-440cb173] { opacity: 0.65; font-size: 0.68rem; text-transform: uppercase;
}
.change-chip s[data-v-440cb173] { opacity: 0.55;
}
.arrow[data-v-440cb173] { opacity: 0.5;
}
.reconcile-footer[data-v-440cb173] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border-1, rgba(255, 255, 255, 0.08));
}
.footer-left[data-v-440cb173] { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
.footer-right[data-v-440cb173] { display: flex; align-items: center; gap: 0.8rem;
}
.sel-count[data-v-440cb173] { font-size: 0.8rem; opacity: 0.6;
}
.skip-note[data-v-440cb173] { font-size: 0.75rem; opacity: 0.55; max-width: 42ch;
}
.btn-primary[data-v-440cb173] { padding: 0.5rem 1.1rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; background: var(--cat-green, #30a46c); color: #fff;
}
.btn-primary[data-v-440cb173]:disabled { opacity: 0.5; cursor: not-allowed;
}
.btn-ghost[data-v-440cb173] { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border-1, rgba(255, 255, 255, 0.15)); background: transparent; color: inherit; cursor: pointer;
}
.btn-ghost[data-v-440cb173]:disabled { opacity: 0.4; cursor: not-allowed;
}

/* Stat-strip value tones (rd-stat-cell-val coloring) */
.rd-stat-cell-val.positive[data-v-fbc854da] { color: var(--profit);
}
.rd-stat-cell-val.negative[data-v-fbc854da] { color: var(--loss);
}

/* Reconcile-with-broker header action */
.rd-page-head[data-v-fbc854da] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.history-head-actions[data-v-fbc854da] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Export-CSV header action — mirrors the reconcile button geometry in a neutral tone. */
.export-btn[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.export-btn[data-v-fbc854da]:hover {
  color: var(--text);
  border-color: var(--accent);
}
.export-btn-icon[data-v-fbc854da] {
  width: 15px;
  height: 15px;
}
.reconcile-btn[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--cat-green-rgb), 0.35);
  background: rgba(var(--cat-green-rgb), 0.1);
  color: var(--cat-green);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.reconcile-btn[data-v-fbc854da]:hover { background: rgba(var(--cat-green-rgb), 0.18);
}
.reconcile-btn-icon[data-v-fbc854da] { font-size: 1rem;
}
.reconcile-badge[data-v-fbc854da] {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--cat-green, #30a46c);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Loading, Error, Empty States */
.loading-state[data-v-fbc854da],
.empty-state[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.spinner[data-v-fbc854da] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-fbc854da 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin-fbc854da {
to { transform: rotate(360deg);
}
}
.empty-icon[data-v-fbc854da] {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.empty-state p[data-v-fbc854da],
.loading-state p[data-v-fbc854da] {
  margin: 0;
  color: var(--text-mute);
}
.empty-state small[data-v-fbc854da] {
  margin-top: 0.5rem;
  color: var(--text-mute);
}

/* Error state now uses the shared .rd-error / .rd-error-retry primitives
   (redesign-components.css). .retry-btn is kept — the empty-state "Clear
   filters" button still uses it. */
.retry-btn[data-v-fbc854da] {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--loss);
  border-radius: 4px;
  color: var(--loss);
  cursor: pointer;
}
.retry-btn[data-v-fbc854da]:hover {
  background: rgba(var(--loss-rgb),0.1);
}

/* Accordion — design .day-group accordions */
.accordion-list[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-group[data-v-fbc854da] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s var(--ease-out);
}
.day-group[data-v-fbc854da]:hover {
  border-color: var(--border-strong);
}
.day-group.open[data-v-fbc854da] {
  border-color: rgba(var(--accent-rgb), 0.3);
}
.day-head[data-v-fbc854da] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.16s var(--ease-out);
}
.day-head[data-v-fbc854da]:hover {
  background: var(--panel-2);
}
.day-head.expanded[data-v-fbc854da] {
  border-bottom: 1px solid var(--border);
  background: rgba(var(--accent-rgb), 0.04);
}
.day-chevron[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  color: var(--text-mute);
  flex: none;
  transition: transform 0.2s var(--ease-out), color 0.16s var(--ease-out);
}
.day-chevron.open[data-v-fbc854da] {
  transform: rotate(90deg);
}
.day-head:hover .day-chevron[data-v-fbc854da] { color: var(--accent);
}
.day-date[data-v-fbc854da] {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
}
.day-count[data-v-fbc854da] {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  background: var(--panel-2);
  padding: 3px 8px;
  border-radius: 6px;
}
.day-spacer[data-v-fbc854da] { flex: 1;
}
.day-wl[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.wins[data-v-fbc854da] { color: var(--profit);
}
.losses[data-v-fbc854da] { color: var(--loss);
}
.breakeven[data-v-fbc854da] { color: var(--text-mute);
}
.day-pnl[data-v-fbc854da] {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  min-width: 80px;
  text-align: right;
}
.day-pnl.positive[data-v-fbc854da] { color: var(--profit);
}
.day-pnl.negative[data-v-fbc854da] { color: var(--loss);
}
.day-pnl.neutral[data-v-fbc854da] { color: var(--text-mute);
}

/* Trades Table — day body */
.day-body[data-v-fbc854da] {
  padding: 14px 18px 16px;
}
.trades-table[data-v-fbc854da] {
  width: 100%;
  font-size: 0.85rem;
}
.table-header[data-v-fbc854da] {
  display: grid;
  grid-template-columns: 65px 65px 1fr 50px 115px 45px 90px 60px 80px 140px;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.table-row[data-v-fbc854da] {
  display: grid;
  grid-template-columns: 65px 65px 1fr 50px 115px 45px 90px 60px 80px 140px;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.14s var(--ease-out);
}
.table-row[data-v-fbc854da]:hover {
  background: var(--panel-2);
}
.table-row[data-v-fbc854da]:last-child {
  border-bottom: none;
}

/* Grid with fees + net columns */
.fees-columns .table-header[data-v-fbc854da],
.fees-columns .table-row[data-v-fbc854da] {
  grid-template-columns: 65px 65px 1fr 50px 115px 45px 90px 60px 80px 65px 80px 140px;
}

/* Grid with settings column */
.settings-columns .table-header[data-v-fbc854da],
.settings-columns .table-row[data-v-fbc854da] {
  grid-template-columns: 65px 65px 1fr 50px 115px 45px 90px 60px 80px 140px 50px;
}
.settings-columns.fees-columns .table-header[data-v-fbc854da],
.settings-columns.fees-columns .table-row[data-v-fbc854da] {
  grid-template-columns: 65px 65px 1fr 50px 115px 45px 90px 60px 80px 65px 80px 140px 50px;
}
.col-settings[data-v-fbc854da] {
  text-align: center;
}
.table-row.win[data-v-fbc854da] { border-left: 3px solid var(--profit); margin-left: -1.25rem; padding-left: calc(1.25rem - 3px);
}
.table-row.loss[data-v-fbc854da] { border-left: 3px solid var(--loss); margin-left: -1.25rem; padding-left: calc(1.25rem - 3px);
}
.table-row.breakeven[data-v-fbc854da] { border-left: 3px solid #f1c40f; margin-left: -1.25rem; padding-left: calc(1.25rem - 3px);
}
.table-row.cancelled[data-v-fbc854da] { opacity: 0.6; border-left: 3px solid #f39c12; margin-left: -1.25rem; padding-left: calc(1.25rem - 3px);
}
/* Paper-trade rows get a pink left-border to signify synthetic execution.
   Wins/losses on paper trades keep the pink border (paper identity takes
   precedence over outcome color). Cancelled paper rows stay dimmed. */
.table-row.paper-trade[data-v-fbc854da] { border-left: 3px solid var(--paper); margin-left: -1.25rem; padding-left: calc(1.25rem - 3px);
}
.col-entry-time[data-v-fbc854da] { color: var(--text-mute);
}
.col-exit-time[data-v-fbc854da] { color: var(--text-mute);
}
.col-ticker[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.ticker-symbol[data-v-fbc854da] {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.ticker-details[data-v-fbc854da] {
  font-size: 0.7rem;
  color: var(--text-mute);
  line-height: 1.2;
}

/* Futures ticker (e.g. "MESU5") renders the raw contract symbol — no
   strike/expiration parts to show, so it takes the full ticker-symbol slot
   with slightly relaxed letter-spacing for the trailing month/year code. */
.futures-ticker[data-v-fbc854da] {
  letter-spacing: 0.02em;
}
.ticker-tags[data-v-fbc854da] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

/* LONG/SHORT direction pill for futures rows. Mirrors the BUY/SELL
   leg-side-badge treatment used in the spread entry-legs breakdown. */
.futures-side-pill[data-v-fbc854da] {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.futures-side-pill.side-long[data-v-fbc854da] {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
}
.futures-side-pill.side-short[data-v-fbc854da] {
  background: rgba(var(--loss-rgb), 0.18);
  color: var(--loss);
}
.ticker-source[data-v-fbc854da] {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ticker-source.source-alert[data-v-fbc854da] {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.25);
}
.ticker-source.source-manual[data-v-fbc854da] {
  background: rgba(234, 88, 12, 0.15);
  color: #fb923c;
  border: 1px solid rgba(234, 88, 12, 0.3);
}
.ticker-source.source-copy-trade[data-v-fbc854da] {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.col-qty[data-v-fbc854da] { text-align: center;
}
.col-entry[data-v-fbc854da] { color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.4rem;
}
.col-exit-type[data-v-fbc854da] { display: inline-flex; align-items: center; gap: 0.4rem;
}
.col-slip[data-v-fbc854da] { font-size: 0.75rem;
}
.col-slip.slip-positive[data-v-fbc854da] { color: #4ade80;
}
.col-slip.slip-negative[data-v-fbc854da] { color: #f87171;
}
.col-exit[data-v-fbc854da] { color: var(--text-dim);
}
.cancelled-badge[data-v-fbc854da] {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  background: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border-radius: 3px;
}
.col-percent.positive[data-v-fbc854da] { color: var(--profit);
}
.col-percent.negative[data-v-fbc854da] { color: var(--loss);
}
.col-percent.neutral[data-v-fbc854da] { color: var(--text-mute);
}
.col-pnl[data-v-fbc854da] { font-weight: 600;
}
.col-pnl.positive[data-v-fbc854da] { color: var(--profit);
}
.col-pnl.negative[data-v-fbc854da] { color: var(--loss);
}
.col-pnl.neutral[data-v-fbc854da] { color: var(--text-mute);
}
.col-fees[data-v-fbc854da] { font-size: 0.8rem; opacity: 0.85;
}
.col-fees.negative[data-v-fbc854da] { color: var(--loss);
}
.col-net[data-v-fbc854da] { font-weight: 600;
}
.col-net.positive[data-v-fbc854da] { color: var(--profit);
}
.col-net.negative[data-v-fbc854da] { color: var(--loss);
}
.col-net.neutral[data-v-fbc854da] { color: var(--text-mute);
}
.fees-banner[data-v-fbc854da] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 14px;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--accent);
}

/* Filter bar — collapsible rd filter bar */
.filter-bar[data-v-fbc854da] {
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.filter-bar-header[data-v-fbc854da] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  gap: 0.5rem;
}
.filter-toggle[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0.25rem 0.25rem;
  transition: color 0.16s var(--ease-out);
}
.filter-toggle[data-v-fbc854da]:hover {
  color: var(--text);
}
.filter-toggle svg[data-v-fbc854da] {
  stroke: var(--text-mute);
}
.filter-count[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border-radius: 9px;
}
.filter-chevron[data-v-fbc854da] {
  font-size: 0.55rem;
  color: var(--text-mute);
  margin-left: 0.15rem;
}
.filter-clear[data-v-fbc854da] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  padding: 6px 11px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.16s var(--ease-out);
}
.filter-clear[data-v-fbc854da]:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.filter-panel[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.85rem 0.85rem 1rem;
  border-top: 1px solid var(--border);
}
.filter-row[data-v-fbc854da] {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.filter-field[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 180px;
}
.filter-label[data-v-fbc854da] {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
  font-weight: 600;
}
.filter-input[data-v-fbc854da] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 9px 13px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s var(--ease-out);
}
.filter-input[data-v-fbc854da]:hover {
  border-color: var(--border-strong);
}
.filter-input[data-v-fbc854da]:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1);
}
.filter-input[data-v-fbc854da]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
.filter-group[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.chip-row[data-v-fbc854da] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip[data-v-fbc854da] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  padding: 0.35rem 0.8rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.chip-dot[data-v-fbc854da] {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.chip[data-v-fbc854da]:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.chip.active[data-v-fbc854da] {
  background: rgba(var(--accent-rgb),0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.chip-win.active[data-v-fbc854da] {
  background: rgba(var(--profit-rgb),0.18);
  border-color: var(--profit);
  color: var(--profit);
}
.chip-loss.active[data-v-fbc854da] {
  background: rgba(var(--loss-rgb),0.18);
  border-color: var(--loss);
  color: var(--loss);
}
.chip-be.active[data-v-fbc854da] {
  background: rgba(241, 196, 15, 0.18);
  border-color: #f1c40f;
  color: #f1c40f;
}
.chip-broker-paper.active[data-v-fbc854da] {
  background: rgba(var(--paper-rgb),0.18);
  border-color: var(--paper);
  color: var(--paper);
}
.fees-banner-icon[data-v-fbc854da] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--accent);
}
.exit-badge[data-v-fbc854da] {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--border);
  color: var(--text-mute);
}
.exit-badge.trailing[data-v-fbc854da] {
  background: rgba(var(--accent-rgb),0.2);
  color: var(--accent);
}
.exit-badge.oco[data-v-fbc854da] {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

/* Multi-leg toggle pill in the exit-type column */
.multi-leg-toggle[data-v-fbc854da] {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(64, 200, 145, 0.12);
  border: 1px solid rgba(64, 200, 145, 0.35);
  color: #40c891;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.multi-leg-toggle[data-v-fbc854da]:hover {
  background: rgba(64, 200, 145, 0.22);
}
.multi-leg-toggle.active[data-v-fbc854da] {
  background: rgba(64, 200, 145, 0.3);
  border-color: #40c891;
  color: #fff;
}

/* Shot-caller: open the Edit-fills modal for a closed trade (broker parity). */
.edit-fills-btn[data-v-fbc854da] {
  margin-left: 0.4rem;
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(120, 150, 255, 0.12);
  border: 1px solid rgba(120, 150, 255, 0.35);
  color: #9db0ff;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.edit-fills-btn[data-v-fbc854da]:hover {
  background: rgba(120, 150, 255, 0.22);
  border-color: #9db0ff;
}

/* Entry-fills expand button (amber to distinguish from green exit-legs). */
.entry-fills-toggle[data-v-fbc854da] {
  font-size: 0.65rem;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.35);
  color: #f5a623;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: background 120ms ease, border-color 120ms ease;
}
.entry-fills-toggle[data-v-fbc854da]:hover {
  background: rgba(245, 166, 35, 0.22);
}
.entry-fills-toggle.active[data-v-fbc854da] {
  background: rgba(245, 166, 35, 0.3);
  border-color: #f5a623;
  color: #fff;
}

/* Entry-fills expandable row (amber sibling of .legs-breakdown-row) */
.entry-fills-row[data-v-fbc854da] {
  grid-column: 1 / -1;
  background: rgba(245, 166, 35, 0.04);
  border-top: 1px solid rgba(245, 166, 35, 0.18);
  border-bottom: 1px solid rgba(245, 166, 35, 0.18);
  padding: 0.6rem 1rem;
}
.entry-fills-breakdown[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.entry-fills-breakdown-header[data-v-fbc854da],
.entry-fills-breakdown-line[data-v-fbc854da] {
  display: grid;
  grid-template-columns: auto 1fr 0.6fr 0.8fr 1fr;
  gap: 0.6rem;
  align-items: center;
}
.entry-fills-breakdown-header[data-v-fbc854da] {
  color: var(--text-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed rgba(245, 166, 35, 0.18);
}
.entry-fills-breakdown-line[data-v-fbc854da] {
  padding: 0.25rem 0;
}
.entry-fills-breakdown-line .entry-fill-tag[data-v-fbc854da] {
  background: #f5a623;
  color: var(--bg);
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  width: fit-content;
}
.entry-fills-breakdown-line.entry-fill-initial .entry-fill-tag[data-v-fbc854da] {
  background: #8993a4;
}
.entry-fills-breakdown-line .entry-fill-tag.avg[data-v-fbc854da] {
  background: var(--profit);
}
.entry-fills-breakdown-line .entry-fill-source-badge[data-v-fbc854da] {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(245, 166, 35, 0.18);
  color: #f5a623;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  width: fit-content;
  font-weight: 600;
}
.entry-fills-breakdown-line.entry-fill-initial .entry-fill-source-badge[data-v-fbc854da] {
  background: rgba(120, 130, 145, 0.18);
  color: #8993a4;
}
.entry-fills-breakdown-line.entry-fills-avg[data-v-fbc854da] {
  border-top: 1px dashed rgba(245, 166, 35, 0.18);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  color: var(--profit);
  font-weight: 600;
}
.entry-fills-when[data-v-fbc854da] {
  text-align: right;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

/* Multi-leg expandable per-trade breakdown */
.legs-breakdown-row[data-v-fbc854da] {
  grid-column: 1 / -1;
  background: rgba(64, 200, 145, 0.04);
  border-top: 1px solid rgba(64, 200, 145, 0.18);
  border-bottom: 1px solid rgba(64, 200, 145, 0.18);
  padding: 0.6rem 1rem;
}
.legs-breakdown-table[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.legs-breakdown-header[data-v-fbc854da],
.legs-breakdown-line[data-v-fbc854da] {
  display: grid;
  grid-template-columns: auto 0.6fr 0.8fr 0.8fr 1fr 1fr 0.9fr;
  gap: 0.6rem;
  align-items: center;
}
.legs-breakdown-header[data-v-fbc854da] {
  color: var(--text-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed rgba(64, 200, 145, 0.18);
}
.legs-breakdown-line[data-v-fbc854da] {
  padding: 0.25rem 0;
}
.legs-breakdown-line .leg-pct[data-v-fbc854da] {
  display: block;
  font-size: 0.65rem;
  color: var(--text-mute);
  font-weight: 400;
}
.legs-breakdown-line .leg-tag[data-v-fbc854da] {
  background: #40c891;
  color: var(--bg);
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  width: fit-content;
}
.legs-breakdown-line .leg-outcome-badge[data-v-fbc854da] {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--border);
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  width: fit-content;
}
.legs-breakdown-line.leg-outcome-positive .leg-outcome-badge[data-v-fbc854da] {
  background: rgba(var(--profit-rgb),0.18);
  color: var(--profit);
}
.legs-breakdown-line.leg-outcome-negative .leg-outcome-badge[data-v-fbc854da] {
  background: rgba(var(--loss-rgb),0.18);
  color: var(--loss);
}
.legs-breakdown-line.leg-state-cancelled .leg-outcome-badge[data-v-fbc854da],
.legs-breakdown-line.leg-state-failed .leg-outcome-badge[data-v-fbc854da] {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}
.legs-breakdown-line .legs-pnl-col[data-v-fbc854da] {
  text-align: right;
  font-weight: 600;
}
.legs-breakdown-line.leg-state-cancelled[data-v-fbc854da],
.legs-breakdown-line.leg-state-failed[data-v-fbc854da] {
  opacity: 0.7;
}

/* Spread entry-legs toggle pill (purple to distinguish from amber entry-fills
   and green exit-legs). Sits beside the spread-type pill in the ticker column. */
.entry-legs-toggle[data-v-fbc854da] {
  font-size: 0.65rem;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #b87df0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: background 120ms ease, border-color 120ms ease;
}
.entry-legs-toggle[data-v-fbc854da]:hover {
  background: rgba(168, 85, 247, 0.22);
}
.entry-legs-toggle.active[data-v-fbc854da] {
  background: rgba(168, 85, 247, 0.3);
  border-color: #a855f7;
  color: #fff;
}

/* Spread entry-legs expandable row (purple sibling of .legs-breakdown-row) */
.entry-legs-row[data-v-fbc854da] {
  grid-column: 1 / -1;
  background: rgba(168, 85, 247, 0.04);
  border-top: 1px solid rgba(168, 85, 247, 0.18);
  border-bottom: 1px solid rgba(168, 85, 247, 0.18);
  padding: 0.6rem 1rem;
}
.entry-legs-breakdown[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
}
.entry-legs-breakdown-header[data-v-fbc854da],
.entry-legs-breakdown-line[data-v-fbc854da] {
  display: grid;
  grid-template-columns: auto 1.4fr 0.6fr 0.8fr 0.8fr;
  gap: 0.6rem;
  align-items: center;
}
.entry-legs-breakdown-header[data-v-fbc854da] {
  color: var(--text-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.18);
}
.entry-legs-breakdown-line[data-v-fbc854da] {
  padding: 0.25rem 0;
}
.entry-legs-breakdown-line .leg-side-badge[data-v-fbc854da] {
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  width: fit-content;
  letter-spacing: 0.4px;
}
.entry-legs-breakdown-line.leg-side-buy .leg-side-badge[data-v-fbc854da] {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
}
.entry-legs-breakdown-line.leg-side-sell .leg-side-badge[data-v-fbc854da] {
  background: rgba(var(--loss-rgb),0.18);
  color: var(--loss);
}
.entry-legs-breakdown-line .leg-symbol[data-v-fbc854da] {
  font-variant-numeric: tabular-nums;
}

/* Day Summary — design day-summary footer */
.day-summary[data-v-fbc854da] {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.summary-item[data-v-fbc854da] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.summary-item .label[data-v-fbc854da] {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.summary-item .value[data-v-fbc854da] {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.summary-item .value.positive[data-v-fbc854da] { color: var(--profit);
}
.summary-item .value.negative[data-v-fbc854da] { color: var(--loss);
}
.summary-item .value.neutral[data-v-fbc854da] { color: var(--text-mute);
}

/* Result banner - hidden on desktop */
.result-banner[data-v-fbc854da] {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
.table-header[data-v-fbc854da],
  .table-row[data-v-fbc854da] {
    grid-template-columns: 55px 55px 1fr 40px 60px 40px 70px 50px 70px 70px;
    font-size: 0.75rem;
}
.fees-columns .table-header[data-v-fbc854da],
  .fees-columns .table-row[data-v-fbc854da] {
    grid-template-columns: 55px 55px 1fr 40px 60px 40px 70px 50px 70px 55px 70px 70px;
}
.settings-columns .table-header[data-v-fbc854da],
  .settings-columns .table-row[data-v-fbc854da] {
    grid-template-columns: 55px 55px 1fr 40px 60px 40px 70px 50px 70px 70px 40px;
}
.settings-columns.fees-columns .table-header[data-v-fbc854da],
  .settings-columns.fees-columns .table-row[data-v-fbc854da] {
    grid-template-columns: 55px 55px 1fr 40px 60px 40px 70px 50px 70px 55px 70px 70px 40px;
}
}
@media (max-width: 768px) {
.history-header[data-v-fbc854da] {
    flex-direction: column;
}
.header-stats[data-v-fbc854da] {
    width: 100%;
    justify-content: space-between;
}
.stat[data-v-fbc854da] {
    align-items: flex-start;
}

  /* Accordion header mobile fixes */
.day-head[data-v-fbc854da] {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem;
}
.day-chevron[data-v-fbc854da] {
    flex: none;
}
.day-date[data-v-fbc854da] {
    font-size: 0.85rem;
}
.day-count[data-v-fbc854da] {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
}
.day-wl[data-v-fbc854da] {
    font-size: 0.7rem;
    gap: 0.4rem;
    flex-shrink: 0;
}
.day-pnl[data-v-fbc854da] {
    font-size: 0.8rem;
    min-width: 0;
    white-space: nowrap;
}

  /* Hide table header on mobile */
.table-header[data-v-fbc854da] {
    display: none;
}

  /* Hide settings column on mobile */
.col-settings[data-v-fbc854da] {
    display: none;
}

  /* Card-based layout for trade rows on mobile */
.table-row[data-v-fbc854da] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0;
    background: rgba(22, 22, 26, 0.5);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border-bottom: none;
    border-left: none;
    margin-left: 0;
    overflow: hidden;
}
.table-row[data-v-fbc854da]:last-child {
    margin-bottom: 0;
}

  /* Override desktop left-border styles on mobile */
.table-row.win[data-v-fbc854da],
  .table-row.loss[data-v-fbc854da],
  .table-row.breakeven[data-v-fbc854da],
  .table-row.cancelled[data-v-fbc854da],
  .table-row.paper-trade[data-v-fbc854da] {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}
.table-row.cancelled[data-v-fbc854da] {
    opacity: 0.6;
}

  /* Result banner on mobile */
.result-banner[data-v-fbc854da] {
    display: block;
    grid-column: 1 / -1;
    order: 1;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.result-banner.win[data-v-fbc854da] {
    background: rgba(var(--profit-rgb),0.15);
    color: var(--profit);
}
.result-banner.loss[data-v-fbc854da] {
    background: rgba(var(--loss-rgb),0.15);
    color: var(--loss);
}
.result-banner.breakeven[data-v-fbc854da] {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}
.result-banner.cancelled[data-v-fbc854da] {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

  /* Mobile: Ticker spans full width below banner */
.col-ticker[data-v-fbc854da] {
    grid-column: 1 / -1;
    order: 2;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(45, 45, 68, 0.5);
}

  /* Reorder fields for mobile: Entry Time | Exit Time, Entry Price | Slip, Exit Price | Qty, Exit Type | Return, P&L */
.col-entry-time[data-v-fbc854da] { order: 3;
}
.col-exit-time[data-v-fbc854da] { order: 4;
}
.col-entry[data-v-fbc854da] { order: 5;
}
.col-slip[data-v-fbc854da] { order: 6;
}
.col-exit[data-v-fbc854da] { order: 7;
}
.col-qty[data-v-fbc854da] { order: 8;
}
.col-exit-type[data-v-fbc854da] { order: 9;
}
.col-percent[data-v-fbc854da] { order: 10;
}
.col-pnl[data-v-fbc854da] { order: 11;
}
.col-fees[data-v-fbc854da] { order: 12;
}
.col-net[data-v-fbc854da] { order: 13;
}
.ticker-symbol[data-v-fbc854da] {
    font-size: 1rem;
}

  /* Mobile: Add labels before values */
.col-entry-time[data-v-fbc854da]::before,
  .col-exit-time[data-v-fbc854da]::before,
  .col-qty[data-v-fbc854da]::before,
  .col-entry[data-v-fbc854da]::before,
  .col-slip[data-v-fbc854da]::before,
  .col-exit[data-v-fbc854da]::before,
  .col-percent[data-v-fbc854da]::before,
  .col-pnl[data-v-fbc854da]::before,
  .col-fees[data-v-fbc854da]::before,
  .col-net[data-v-fbc854da]::before,
  .col-exit-type[data-v-fbc854da]::before {
    display: block;
    font-size: 0.65rem;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    letter-spacing: 0.5px;
}
.col-entry-time[data-v-fbc854da]::before { content: 'Entry Time';
}
.col-exit-time[data-v-fbc854da]::before { content: 'Exit Time';
}
.col-qty[data-v-fbc854da]::before { content: 'Quantity';
}
.col-entry[data-v-fbc854da]::before { content: 'Entry Price';
}
.col-slip[data-v-fbc854da]::before { content: 'Slippage';
}
.col-exit[data-v-fbc854da]::before { content: 'Exit Price';
}
.col-percent[data-v-fbc854da]::before { content: 'Return %';
}
.col-pnl[data-v-fbc854da]::before { content: 'Profit/Loss';
}
.col-fees[data-v-fbc854da]::before { content: 'Fees';
}
.col-net[data-v-fbc854da]::before { content: 'Net P&L';
}
.col-exit-type[data-v-fbc854da]::before { content: 'Exit Type';
}
.col-entry-time[data-v-fbc854da],
  .col-exit-time[data-v-fbc854da],
  .col-qty[data-v-fbc854da],
  .col-entry[data-v-fbc854da],
  .col-slip[data-v-fbc854da],
  .col-exit[data-v-fbc854da],
  .col-percent[data-v-fbc854da],
  .col-pnl[data-v-fbc854da],
  .col-fees[data-v-fbc854da],
  .col-net[data-v-fbc854da],
  .col-exit-type[data-v-fbc854da] {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

  /* First column items get left padding, second column items get right padding */
.col-entry-time[data-v-fbc854da],
  .col-entry[data-v-fbc854da],
  .col-slip[data-v-fbc854da],
  .col-qty[data-v-fbc854da],
  .col-percent[data-v-fbc854da] {
    padding-right: 0.5rem;
}
.col-exit-time[data-v-fbc854da],
  .col-exit[data-v-fbc854da],
  .col-exit-type[data-v-fbc854da],
  .col-pnl[data-v-fbc854da],
  .col-net[data-v-fbc854da] {
    padding-left: 0.5rem;
}
.col-fees[data-v-fbc854da] {
    padding-right: 0.5rem;
}
.col-qty[data-v-fbc854da] {
    text-align: left;
}
.col-pnl[data-v-fbc854da] {
    font-size: 1rem;
}

  /* Add bottom padding to last row of fields */
.col-percent[data-v-fbc854da],
  .col-pnl[data-v-fbc854da] {
    padding-bottom: 1rem;
}

  /* Day summary on mobile */
.day-summary[data-v-fbc854da] {
    flex-wrap: wrap;
    gap: 1rem;
}
.summary-item[data-v-fbc854da] {
    flex: 1;
    min-width: 80px;
}
}

/* View As dropdown */
.view-as-container[data-v-fbc854da] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.view-as-label[data-v-fbc854da] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}
.view-as-select[data-v-fbc854da] {
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-width: 180px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.view-as-select[data-v-fbc854da]:hover {
  border-color: var(--accent);
}
.view-as-select[data-v-fbc854da]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.2);
}
.view-as-select[data-v-fbc854da]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.viewing-as-badge[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Settings button on trade rows */
.row-settings-btn[data-v-fbc854da] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 0.25rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.row-settings-btn[data-v-fbc854da]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb),0.25);
  border-color: rgba(var(--accent-rgb),0.5);
}
.row-settings-btn.disabled[data-v-fbc854da] {
  opacity: 0.3;
  cursor: not-allowed;
}

.leaderboard-container[data-v-b1e5f93c] {
  font-family: var(--sans);
}

/* Intro description */
.lb-description[data-v-b1e5f93c] {
  margin: 0 0 18px 0;
  padding: 0.75rem 1rem;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Toolbar wraps the segmented control groups */
.rd-toolbar .rd-seg[data-v-b1e5f93c] { flex-wrap: wrap;
}

/* STAX license-mask toggle sits at the far right of the toolbar */
.lb-mask-toggle[data-v-b1e5f93c] { margin-left: auto;
}

/* Stats strip tweaks */
.lb-stat-small[data-v-b1e5f93c] { font-size: 14px;
}

/* Highlights Section */
.highlights-section[data-v-b1e5f93c] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.highlight-card[data-v-b1e5f93c] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 16px 18px;
}
.highlight-tick[data-v-b1e5f93c] {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  height: auto;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--profit);
  box-shadow: 0 0 12px rgba(var(--profit-rgb), 0.4);
}
.highlight-tick.top-tick[data-v-b1e5f93c] {
  background: var(--accent-2);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}
.highlight-icon[data-v-b1e5f93c] {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.highlight-content[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.highlight-value[data-v-b1e5f93c] {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
}
.highlight-ticker[data-v-b1e5f93c] {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.highlight-stats[data-v-b1e5f93c] {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}
.highlight-stat[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.highlight-stat .stat-value[data-v-b1e5f93c] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.highlight-stat .stat-label[data-v-b1e5f93c] {
  margin-bottom: 0;
}

/* ---------- Podium (2-1-3) ---------- */
.podium[data-v-b1e5f93c] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.podium-col[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Visual ordering 2-1-3: middle place (rank 1) sits highest already via stand height */
.podium-ava[data-v-b1e5f93c] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow);
  margin-bottom: 8px;
}
.podium-col.place-1 .podium-ava[data-v-b1e5f93c] {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.podium-ava.gold[data-v-b1e5f93c] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.podium-ava.silver[data-v-b1e5f93c],
.podium-ava.bronze[data-v-b1e5f93c] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.podium-name[data-v-b1e5f93c] {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-handle[data-v-b1e5f93c] {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.podium-roi[data-v-b1e5f93c] {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  margin-top: 6px;
}
.podium-col.place-1 .podium-roi[data-v-b1e5f93c] { font-size: 19px;
}
.podium-stand[data-v-b1e5f93c] {
  position: relative;
  width: 100%;
  margin-top: 10px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  height: 88px;
}
.podium-col.place-1 .podium-stand[data-v-b1e5f93c] {
  height: 132px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), var(--panel) 70%);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.podium-col.place-2 .podium-stand[data-v-b1e5f93c] { height: 104px;
}
.podium-col.place-3 .podium-stand[data-v-b1e5f93c] { height: 88px;
}
.podium-col.is-you .podium-stand[data-v-b1e5f93c] {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.2), var(--panel) 70%);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.podium-rank[data-v-b1e5f93c] {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--text-mute);
}
.podium-col.place-1 .podium-rank[data-v-b1e5f93c] { color: var(--accent);
}

/* ---------- Full rankings table ---------- */
.table-wrapper[data-v-b1e5f93c] {
  border-top: 1px solid var(--border);
}
.leaderboard-table th.sortable[data-v-b1e5f93c] {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.leaderboard-table th.sortable[data-v-b1e5f93c]:hover {
  color: var(--text);
}
.leaderboard-table td[data-v-b1e5f93c] {
  color: var(--text);
}

/* Current user highlight */
.leaderboard-table tbody tr.you-row[data-v-b1e5f93c] {
  background: rgba(var(--accent-rgb), 0.12);
}
.leaderboard-table tbody tr.you-row[data-v-b1e5f93c]:hover {
  background: rgba(var(--accent-rgb), 0.18);
}

/* Totals row */
.leaderboard-table tfoot .totals-row td[data-v-b1e5f93c] {
  border-top: 2px solid var(--border);
  border-bottom: none;
  background: var(--panel-2);
  font-weight: 700;
  color: var(--text);
}
.leaderboard-table tfoot .rd-rt-foot-label[data-v-b1e5f93c] {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}
.leaderboard-table tfoot .totals-count[data-v-b1e5f93c] {
  font-weight: 500;
}
.leaderboard-table tfoot .totals-agg[data-v-b1e5f93c] {
  margin-left: 4px;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mute);
}

/* Column sizing */
.col-rank[data-v-b1e5f93c] { width: 72px;
}
.col-trader[data-v-b1e5f93c] { min-width: 140px;
}
.col-profit[data-v-b1e5f93c],
.col-profit-dollars[data-v-b1e5f93c],
.col-avg[data-v-b1e5f93c],
.col-trades[data-v-b1e5f93c] {
  font-variant-numeric: tabular-nums;
}
.col-status[data-v-b1e5f93c] { width: 64px;
}

/* Rank badges */
.rank-badge[data-v-b1e5f93c] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--panel-2);
  color: var(--text-dim);
}
.rank-badge.gold[data-v-b1e5f93c] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--glow);
}
.rank-badge.silver[data-v-b1e5f93c] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.rank-badge.bronze[data-v-b1e5f93c] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Trader column */
.masked-license[data-v-b1e5f93c] { color: var(--text-dim);
}

/* Profit colors (kept as aliases for existing :class bindings) */
.positive[data-v-b1e5f93c] { color: var(--profit);
}
.negative[data-v-b1e5f93c] { color: var(--loss);
}

/* Your position card (when outside top entries) */
.your-position[data-v-b1e5f93c] {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.your-position-rank[data-v-b1e5f93c] {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}
.your-position-profit[data-v-b1e5f93c] {
  margin-left: auto;
  font-weight: 600;
}

/* Loading state */
.loading-state[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  color: var(--text-mute);
}
.spinner[data-v-b1e5f93c] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-b1e5f93c 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin-b1e5f93c {
to { transform: rotate(360deg);
}
}

/* Error state */
.error-state[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  text-align: center;
}
.error-icon[data-v-b1e5f93c] {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.error-state p[data-v-b1e5f93c] {
  color: var(--loss);
  margin-bottom: 1rem;
}
.retry-btn[data-v-b1e5f93c] {
  border: none;
}

/* Empty state */
.empty-state[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.empty-icon[data-v-b1e5f93c] {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

/* Coming soon */
.coming-soon[data-v-b1e5f93c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 0.25rem;
}
.coming-soon-icon[data-v-b1e5f93c] {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}
.coming-soon h2[data-v-b1e5f93c] {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: var(--text);
}
.coming-soon p[data-v-b1e5f93c] {
  margin: 0;
  color: var(--text-mute);
  font-size: 1rem;
}
@media (max-width: 768px) {
.highlights-section[data-v-b1e5f93c] {
    grid-template-columns: 1fr;
}
.highlight-card.top-trade[data-v-b1e5f93c] {
    flex-wrap: wrap;
}
.highlight-stats[data-v-b1e5f93c] {
    width: 100%;
    margin-left: 0;
    margin-top: 0.75rem;
    justify-content: space-around;
}
.podium[data-v-b1e5f93c] {
    gap: 8px;
}
}

/* ---------- Tier badges ---------- */
.tier-badge[data-v-b1e5f93c] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0.9;
}

/* Podium: slightly larger badge since the name area has more room */
.podium-name .tier-badge[data-v-b1e5f93c] {
  font-size: 0.6rem;
  padding: 1px 4px;
  margin-left: 4px;
}
.tier-badge.tier-diamond[data-v-b1e5f93c]  { color: #22D3EE; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.3);
}
.tier-badge.tier-platinum[data-v-b1e5f93c] { color: #D6DEEA; background: rgba(214, 222, 234, 0.10); border: 1px solid rgba(214, 222, 234, 0.25);
}
.tier-badge.tier-gold[data-v-b1e5f93c]     { color: #FBBF24; background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.28);
}
.tier-badge.tier-silver[data-v-b1e5f93c]   { color: #B5C2D6; background: rgba(181, 194, 214, 0.10); border: 1px solid rgba(181, 194, 214, 0.22);
}
.tier-badge.tier-bronze[data-v-b1e5f93c]   { color: #C9803E; background: rgba(201, 128, 62, 0.10); border: 1px solid rgba(201, 128, 62, 0.26);
}

/* ---------- Copiers column ---------- */
.col-copiers[data-v-b1e5f93c] {
  width: 76px;
  font-variant-numeric: tabular-nums;
}

.ss-section[data-v-1419e050] {
  background: #1f2937;
  border: 1px solid #2d3748;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ss-section h2[data-v-1419e050] {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: #f3f4f6;
}
.section-note[data-v-1419e050] {
  margin: 0 0 1rem;
  color: #9ca3af;
  font-size: 0.85rem;
  line-height: 1.4;
}
.field[data-v-1419e050] {
  display: block;
  margin-bottom: 1rem;
}
.field[data-v-1419e050]:last-child { margin-bottom: 0;
}
.field-label[data-v-1419e050] {
  display: block;
  font-size: 0.8rem;
  color: #d1d5db;
  margin-bottom: 0.35rem;
  font-weight: 500;
}
.field input[type="text"][data-v-1419e050],
.field input[type="number"][data-v-1419e050],
.field textarea[data-v-1419e050] {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  color: #f3f4f6;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}
.field textarea[data-v-1419e050] { resize: vertical; min-height: 140px; line-height: 1.5;
}
.field input[data-v-1419e050]:focus, .field textarea[data-v-1419e050]:focus {
  outline: none;
  border-color: #4fd1c5;
}
.field input[data-v-1419e050]:disabled, .field textarea[data-v-1419e050]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.field-hint[data-v-1419e050] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #9ca3af;
}
.char-count[data-v-1419e050] {
  float: right;
  font-variant-numeric: tabular-nums;
}
.price-row[data-v-1419e050] {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}
.price-row input[data-v-1419e050] { flex: 1;
}
.price-prefix[data-v-1419e050], .price-suffix[data-v-1419e050] {
  display: inline-flex;
  align-items: center;
  color: #9ca3af;
  font-size: 0.95rem;
}
.checkbox-inline[data-v-1419e050] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #d1d5db;
  cursor: pointer;
}
.checkbox-inline input[data-v-1419e050] { width: auto;
}
.toggle-row[data-v-1419e050] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.toggle-row input[type="checkbox"][data-v-1419e050] {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #4fd1c5;
  cursor: pointer;
}
.toggle-row input[type="checkbox"][data-v-1419e050]:disabled { cursor: not-allowed;
}
.toggle-label[data-v-1419e050] { display: flex; flex-direction: column; gap: 0.15rem;
}
.toggle-title[data-v-1419e050] { color: #f3f4f6; font-size: 0.95rem; font-weight: 500;
}
.toggle-hint[data-v-1419e050] { color: #9ca3af; font-size: 0.8rem;
}
.ss-actions[data-v-1419e050] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.ss-actions .primary[data-v-1419e050] {
  background: #4fd1c5;
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.ss-actions .primary[data-v-1419e050]:hover:not(:disabled) { background: #5eead4;
}
.ss-actions .primary[data-v-1419e050]:disabled { opacity: 0.55; cursor: not-allowed;
}
.ss-actions .secondary[data-v-1419e050] {
  background: transparent;
  color: #d1d5db;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.ss-actions .secondary[data-v-1419e050]:hover:not(:disabled) { border-color: #4b5563; color: #f3f4f6;
}
.ss-actions .secondary[data-v-1419e050]:disabled { opacity: 0.55; cursor: not-allowed;
}

.modal-overlay[data-v-4efbc08b] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.listing-modal[data-v-4efbc08b] {
  position: relative;
  background: #111827;
  border: 1px solid #2d3748;
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.5rem;
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  color: #e5e7eb;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.55));
}
.modal-close-x[data-v-4efbc08b] {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.modal-close-x[data-v-4efbc08b]:hover { color: #f3f4f6;
}
.modal-title[data-v-4efbc08b] {
  margin: 0;
  font-size: 1.15rem;
  color: #f3f4f6;
}
.modal-sub[data-v-4efbc08b] {
  margin: 0.2rem 0 1.25rem;
  color: #9ca3af;
  font-size: 0.9rem;
}

.modal-overlay[data-v-8f323767] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[data-v-8f323767] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 460px;
  width: 90%;
}
.modal h3[data-v-8f323767] {
  color: #fff;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}
.coming-soon-line[data-v-8f323767] {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 1rem 0;
}
.strategy-line[data-v-8f323767] {
  color: var(--text-dim);
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
}
.strategy-line strong[data-v-8f323767] {
  color: #fff;
}
.explain[data-v-8f323767] {
  color: var(--text-dim);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
  font-size: 0.9rem;
}
.pp-status[data-v-8f323767] {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem 0;
}
.pp-error[data-v-8f323767] {
  color: #ff6b6b;
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem 0;
  line-height: 1.4;
}
.paypal-container[data-v-8f323767] {
  margin: 0.5rem 0 1rem 0;
  min-height: 45px;
}
.modal-actions[data-v-8f323767] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.modal-btn[data-v-8f323767] {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.modal-btn.cancel[data-v-8f323767] {
  background: var(--border);
  color: var(--text-dim);
}
.modal-btn.confirm[data-v-8f323767] {
  background: var(--accent);
  color: #fff;
}
.modal-btn[data-v-8f323767]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-btn[data-v-8f323767]:hover:not(:disabled) {
  opacity: 0.85;
}

.marketplace-container[data-v-0c0e04a2] {
  max-width: 1100px;
  margin: 0 auto;
}

/* Panels (redesign) */
.mkt-panel[data-v-0c0e04a2] {
  margin-bottom: 14px;
}

/* .rd-panel-head top-aligns its children for multi-line titles; this one is a
   single line, so center the toggle against it. */
.mkt-viewmode[data-v-0c0e04a2] {
  align-self: center;
  flex: none;
}

/* Loading & Empty (rd-empty handles the visual; keep paragraph reset) */
.rd-empty p[data-v-0c0e04a2] {
  margin: 0;
}

/* Steps */
.steps[data-v-0c0e04a2] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.step[data-v-0c0e04a2] {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.step-number[data-v-0c0e04a2] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  font-family: var(--mono);
}
.step-content h4[data-v-0c0e04a2] {
  color: var(--text);
  margin: 0 0 0.15rem 0;
  font-size: 0.9rem;
  font-family: var(--display);
}
.step-content p[data-v-0c0e04a2] {
  color: var(--text-mute);
  margin: 0;
  font-size: 0.85rem;
}

/* ---------- Strategy card grid ---------- */
.market-grid[data-v-0c0e04a2] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.market-card[data-v-0c0e04a2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: 0.18s var(--ease-out);
}
.market-card[data-v-0c0e04a2]:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.market-card:hover .market-name[data-v-0c0e04a2] {
  color: var(--accent);
}
.inactive-row[data-v-0c0e04a2] {
  opacity: 0.6;
}

/* ---------- Dense list view ----------
   One aligned row per strategy, same data and actions as a card minus the
   description blurb. The columnar grid reads like a table on desktop and
   collapses to labelled stacked cells on mobile — no horizontal scroll.
   Mirrors the Trades / Copy Trade list views. */
.market-list[data-v-0c0e04a2] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Shared column template so the header labels and every row line up. */
.mk-list-head[data-v-0c0e04a2],
.mk-list-item[data-v-0c0e04a2] {
  display: grid;
  grid-template-columns:
    minmax(200px, 2.6fr) /* strategy    */
    minmax(92px, 1fr)    /* type        */
    minmax(74px, 0.7fr)  /* subscribers */
    minmax(76px, 0.8fr)  /* price       */
    176px;               /* action      */
  align-items: center;
  gap: 0.6rem;
}
.mk-list-head[data-v-0c0e04a2] {
  padding: 0.2rem 0.85rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.mk-list-head .mkl-col-num[data-v-0c0e04a2] {
  text-align: right;
}
.mk-list-item[data-v-0c0e04a2] {
  padding: 0.5rem 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: 0.16s var(--ease-out);
}
.mk-list-item[data-v-0c0e04a2]:hover {
  border-color: var(--border-strong);
  background: rgba(var(--accent-rgb), 0.06);
}
.mk-list-item:hover .mkl-name[data-v-0c0e04a2] {
  color: var(--accent);
}
.mk-list-item[data-v-0c0e04a2]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mkl-cell[data-v-0c0e04a2] {
  min-width: 0;
}
.mkl-col-strategy[data-v-0c0e04a2] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mkl-id[data-v-0c0e04a2] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mkl-name[data-v-0c0e04a2] {
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
  font-family: var(--display);
  line-height: 1.25;
  transition: color 0.16s;
}
.mkl-author[data-v-0c0e04a2] {
  color: var(--text-mute);
  font-size: 0.72rem;
}
.mkl-col-type[data-v-0c0e04a2] {
  display: flex;
  min-width: 0;
}
.mkl-col-num[data-v-0c0e04a2] {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkl-price[data-v-0c0e04a2] {
  color: var(--profit);
  font-weight: 600;
}
.mkl-col-action[data-v-0c0e04a2] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Rows are tighter than cards — shrink the shared .market-btn shape to match. */
.mk-list-item .market-btn[data-v-0c0e04a2] {
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  border-radius: 8px;
}
.market-top[data-v-0c0e04a2] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.market-icon[data-v-0c0e04a2] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-id[data-v-0c0e04a2] {
  flex: 1;
  min-width: 0;
}
.market-name[data-v-0c0e04a2] {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--display);
  line-height: 1.25;
  transition: color 0.16s;
}
.market-author[data-v-0c0e04a2] {
  color: var(--text-mute);
  font-size: 0.78rem;
  margin-top: 3px;
}
.strategy-author-name[data-v-0c0e04a2] {
  color: var(--text-dim);
}
.verified[data-v-0c0e04a2] {
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
}

/* Owner-authored blurb — only renders when the strategy ships a description. */
.market-desc[data-v-0c0e04a2] {
  color: var(--text-mute);
  font-size: 0.83rem;
  line-height: 1.45;
  margin: -2px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* badges that ride inside the card name */
.inactive-badge[data-v-0c0e04a2] {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.new-badge[data-v-0c0e04a2] {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* "YOURS" — you publish this strategy. Green so it reads as an ownership
   marker rather than a warning. Hidden from doc screenshots (ALWAYS_HIDE in
   capture.mjs) since captures run as an account that owns listings. */
.owner-badge[data-v-0c0e04a2] {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.35);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Copy Trade pill keeps its distinct purple tone (rd-pill-loss is repurposed
   here only as a layout base; override the colors). */
.type-badge-copy[data-v-0c0e04a2] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

/* Futures pill reuses the amber tone the Tradovate broker pill already uses
   (--cat-amber, see BrokerTypePill.vue) so "futures" reads the same color
   everywhere in the app. */
.type-badge-futures[data-v-0c0e04a2] {
  background: rgba(var(--cat-amber-rgb), 0.15);
  color: var(--cat-amber);
}

/* ---------- 3-up stat block ---------- */
.market-stats[data-v-0c0e04a2] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.market-stat[data-v-0c0e04a2] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ss-l[data-v-0c0e04a2] {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
}
.ss-v[data-v-0c0e04a2] {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-v-dim[data-v-0c0e04a2] {
  color: var(--text-mute);
}
.ss-v-incl[data-v-0c0e04a2] {
  color: var(--accent);
}

/* ---------- card footer ---------- */
.market-foot[data-v-0c0e04a2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.market-price[data-v-0c0e04a2] {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--profit);
}
.market-action[data-v-0c0e04a2] {
  flex: none;
  /* Owners see Edit alongside the subscribe/unsubscribe button. */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.market-btn[data-v-0c0e04a2] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  transition: 0.16s var(--ease-out);
  border: 1px solid transparent;
}

/* Owner-only listing editor trigger on a card. Deliberately quieter than the
   subscribe buttons — it's a management action, not the card's main CTA.
   Must follow .market-btn: same specificity, and it overrides that rule's
   transparent border. */
.owner-edit-btn[data-v-0c0e04a2] {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-dim);
}
.owner-edit-btn[data-v-0c0e04a2]:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.strategy-icon[data-v-0c0e04a2] {
  width: 44px;
  height: 44px;
  /* border-box so width includes padding — without this content-box adds
     padding on top of the 44px, blowing the circle out and distorting layout. */
  box-sizing: border-box;
  border-radius: 50%;
  background: rgb(3, 54, 26);
  object-fit: contain;
  /* Dope logo (95x122): the corners of the rectangular image are pure green
     background — clipping them is content-free. Drop padding so the logo
     itself reads larger; the circle just trims off corner-green. Stax bull
     overrides below. */
  padding: 2px;
  vertical-align: middle;
  flex-shrink: 0;
}
.strategy-icon-fallback[data-v-0c0e04a2] {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.strategy-icon-stax[data-v-0c0e04a2] {
  background: #0a0a1a;
  /* Bull SVG's path actually fills its viewBox to the corners (verified by
     rendering — bull's painted extent is 90%×100% of viewBox). Inscribing
     a near-square shape inside a circle caps it at ~70.7% of the diameter,
     so this padding is the math minimum for a clean fit. Reducing further
     will visibly clip horn tips and back-leg tips. */
  padding: 7px;
}
.strategy-icon-backwoods[data-v-0c0e04a2] {
  /* Square 175×175 illustration; corners are decorative forest/sky, not the
     subject (Bigfoot is centered) — let it fill the circle, corner trim is
     content-safe. No background since the artwork covers the full frame. */
  background: #0a0a1a;
  padding: 0;
}
.strategy-icon-float[data-v-0c0e04a2] {
  /* Square 1254×1254 illustration — an iron butterfly centered on a dark disc,
     corners are near-black background. Let it fill the circle; the corner trim
     is content-free (same treatment as .strategy-icon-backwoods). */
  background: #0a0a1a;
  padding: 0;
}
.strategy-icon-dan[data-v-0c0e04a2] {
  /* Square illustration — cyan emblem centered on a dark navy field, corners
     are flat background. Let it fill the circle (same as .strategy-icon-float). */
  background: #0a0a1a;
  padding: 0;
}

/* New dope avatar ships as a self-contained circular badge with its own
   green border, so the shared base's background + padding would just stack
   on top and ring the image. Strip them and let the artwork render as-is. */
.strategy-icon-dope[data-v-0c0e04a2] {
  background: none;
  padding: 0;
}

/* List-view avatar. Must follow every .strategy-icon-* variant above so the
   size wins on equal specificity (the fallback span also hard-codes 44px).
   Padding is deliberately left to the variants — only the Stax bull's
   inscribed-circle padding needs rescaling for the smaller box. */
.strategy-icon-sm[data-v-0c0e04a2] {
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.strategy-icon-sm.strategy-icon-stax[data-v-0c0e04a2] {
  padding: 5px;
}

/* The "Add" (subscribe) action — layered on the shared .market-btn shape. */
.subscribe-btn[data-v-0c0e04a2] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--glow);
}
.subscribe-btn[data-v-0c0e04a2]:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.subscribe-btn[data-v-0c0e04a2]:disabled {
  background: var(--panel-2);
  color: var(--text-mute);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.unsubscribe-btn[data-v-0c0e04a2] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border-color: rgba(var(--loss-rgb), 0.3);
}
.unsubscribe-btn[data-v-0c0e04a2]:hover {
  background: rgba(var(--loss-rgb), 0.25);
  border-color: rgba(var(--loss-rgb), 0.5);
}

/* Static badge for built-in strategies (OG / Daily Trend) — these come with
   every StaxInvesting subscription so there's no subscribe/unsubscribe to
   render. Uses the "on/installed" treatment from the design. */
.included-pill[data-v-0c0e04a2] {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  cursor: help;
}

/* Modal */
.modal-overlay[data-v-0c0e04a2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[data-v-0c0e04a2] {
  /* .rd-panel supplies the glass background + border + radius. */
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
}
.modal h3[data-v-0c0e04a2] {
  color: var(--text);
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-family: var(--display);
}
.modal p[data-v-0c0e04a2] {
  color: var(--text-dim);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
  font-size: 0.9rem;
}
.modal-error[data-v-0c0e04a2] {
  color: var(--loss) !important;
  font-size: 0.85rem;
}
.paid-cancel-note[data-v-0c0e04a2] {
  color: var(--paper) !important;
  font-size: 0.85rem !important;
  line-height: 1.4;
}
.modal-actions[data-v-0c0e04a2] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* The action buttons carry rd-tb-ghost / rd-tb-solid which supply the full
   look; .modal-btn only normalizes type-button defaults. */
.modal-btn.danger[data-v-0c0e04a2] {
  color: var(--loss);
  border-color: rgba(var(--loss-rgb), 0.4);
}
.modal-btn.danger[data-v-0c0e04a2]:hover {
  background: rgba(var(--loss-rgb), 0.15);
  border-color: rgba(var(--loss-rgb), 0.6);
}

/* Coming Soon Content */
.coming-soon-content[data-v-0c0e04a2] {
  text-align: center;
}
.coming-soon-badge[data-v-0c0e04a2] {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 0.4rem 1.25rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.preview-section[data-v-0c0e04a2] {
  margin-bottom: 2rem;
}
.preview-section h2[data-v-0c0e04a2] {
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-family: var(--display);
}
.tagline[data-v-0c0e04a2] {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 500;
}
.steps-list[data-v-0c0e04a2] {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
  text-align: left;
}
.steps-list li[data-v-0c0e04a2] {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-dim);
  line-height: 1.5;
  font-size: 0.9rem;
  counter-increment: step-counter;
}
.steps-list li[data-v-0c0e04a2]:last-child {
  margin-bottom: 0;
}
.steps-list li[data-v-0c0e04a2]::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--accent);
}
.steps-list li strong[data-v-0c0e04a2] {
  color: var(--text);
}
.coming-soon-footer[data-v-0c0e04a2] {
  padding: 1.25rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.coming-soon-footer p[data-v-0c0e04a2] {
  color: var(--text-mute);
  margin: 0;
  font-size: 0.9rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
.marketplace-container[data-v-0c0e04a2] {
    padding: 0 1rem;
}
.rd-page-title[data-v-0c0e04a2] {
    font-size: 1.5rem;
}
.market-grid[data-v-0c0e04a2] {
    grid-template-columns: 1fr;
}

  /* List view: drop the column header and stack each row into labelled cells. */
.mk-list-head[data-v-0c0e04a2] {
    display: none;
}
.mk-list-item[data-v-0c0e04a2] {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.9rem;
    padding: 0.7rem 0.85rem;
}

  /* Full-width rows top and bottom; that leaves Subscribers and Price — both
     short numerics — to pair up on one line with no dead cell between them. */
.mkl-col-strategy[data-v-0c0e04a2],
  .mkl-col-type[data-v-0c0e04a2],
  .mkl-col-action[data-v-0c0e04a2] {
    grid-column: 1 / -1;
}
.mkl-col-action[data-v-0c0e04a2] {
    justify-content: flex-start;
}
.mkl-col-num[data-v-0c0e04a2] {
    text-align: left;
}
.mkl-cell[data-label][data-v-0c0e04a2]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin-bottom: 0.15rem;
}
}

/* Layout + input chrome mirror the options Allocation Simulator so the two
   views feel like the same control panel. */
.capital-control-grid[data-v-91b3f659] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
}
.control-field[data-v-91b3f659] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
label[data-v-91b3f659] {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 500;
}
.input-wrap[data-v-91b3f659] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 140px;
}
.input-wrap[data-v-91b3f659]:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.affix-right[data-v-91b3f659] {
  color: var(--text-mute);
  font-size: 0.9rem;
  font-family: var(--mono);
}
input[data-v-91b3f659] {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  width: 100%;
  outline: none;
  padding: 0;
}
input[data-v-91b3f659]::-webkit-outer-spin-button,
input[data-v-91b3f659]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'][data-v-91b3f659] {
  -moz-appearance: textfield;
}
.readout[data-v-91b3f659] {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 140px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hint[data-v-91b3f659] {
  flex-basis: 100%;
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.5;
}
.contract-toggle[data-v-91b3f659] {
  display: flex;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-2);
}
.contract-btn[data-v-91b3f659] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-width: 74px;
  padding: 0 0.7rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.1;
}
.contract-btn[data-v-91b3f659]:last-child {
  border-right: none;
}
.contract-btn.active[data-v-91b3f659] {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
}
.contract-root[data-v-91b3f659] {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.contract-kind[data-v-91b3f659] {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.contract-econ[data-v-91b3f659] {
  color: var(--text-mute);
  font-size: 0.7rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.contract-econ.negative[data-v-91b3f659] {
  color: var(--loss);
}

/* Custom steppers — the shared input CSS hides the native spinners, and these
   are big enough to hit repeatedly without aiming. */
.stepper[data-v-91b3f659] {
  display: flex;
  flex-direction: column;
  margin-left: 0.15rem;
  flex: 0 0 auto;
}
.stepper button[data-v-91b3f659] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.5rem;
  line-height: 1;
  cursor: pointer;
}
.stepper button[data-v-91b3f659]:first-child {
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}
.stepper button[data-v-91b3f659]:last-child {
  border-radius: 0 0 4px 4px;
}
.stepper button[data-v-91b3f659]:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--text);
}
.stepper button[data-v-91b3f659]:active {
  background: rgba(var(--accent-rgb), 0.25);
}
.optimize-field[data-v-91b3f659] {
  justify-content: flex-end;
}
.optimize-row[data-v-91b3f659] {
  display: flex;
  gap: 0.4rem;
  height: 38px;
  align-items: stretch;
}
.optimize-btn[data-v-91b3f659] {
  padding: 0 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.optimize-btn[data-v-91b3f659]:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--border-strong);
  color: var(--text);
}
.optimize-result[data-v-91b3f659] {
  max-width: 340px;
  line-height: 1.4;
}

.excursion-dollars[data-v-af78c9c5] {
  font-weight: 700;
  margin-left: 0.3rem;
}
.flat[data-v-af78c9c5] {
  color: var(--text-mute);
}
.dir-pill[data-v-af78c9c5] {
  font-size: 0.62rem;
}
.dir-long[data-v-af78c9c5] {
  background: rgba(var(--profit-rgb), 0.12);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.25);
}
.dir-short[data-v-af78c9c5] {
  background: rgba(var(--loss-rgb), 0.12);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.25);
}
.pill-approx[data-v-af78c9c5] {
  margin-left: 0.3rem;
  background: var(--panel-2);
  color: var(--text-mute);
  border: 1px solid var(--border);
  font-size: 0.6rem;
}
.ladder-row td[data-v-af78c9c5] {
  background: var(--panel-2);
}
.ladder[data-v-af78c9c5] {
  padding: 0.5rem 0 0.6rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.ladder-head[data-v-af78c9c5] {
  color: var(--text-mute);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.ladder-rung[data-v-af78c9c5] {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.15rem 0;
}
.rung-profit[data-v-af78c9c5] {
  min-width: 130px;
}
.rung-sep[data-v-af78c9c5] {
  color: var(--text-mute);
}
.rung-dd[data-v-af78c9c5] {
  min-width: 130px;
}
.rung-peak[data-v-af78c9c5] {
  color: var(--text-mute);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hover ladder popover. Scoped styles still reach it after Teleport — Vue puts
   the scope attribute on the element, and moving it doesn't strip that. */
.ladder-hoverable[data-v-af78c9c5] {
  cursor: help;
}
.ladder-pop[data-v-af78c9c5] {
  position: fixed;
  z-index: 2000;
  width: 300px;
  padding: 0.7rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  line-height: 1.35;
  pointer-events: none;
}
.pop-head[data-v-af78c9c5] {
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.pop-pair[data-v-af78c9c5] {
  color: var(--text-mute);
}
.pop-rung + .pop-rung[data-v-af78c9c5] {
  margin-top: 0.55rem;
}
.pop-line[data-v-af78c9c5] {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.pop-line-dd[data-v-af78c9c5] {
  padding-left: 0.6rem;
}
.pop-pts[data-v-af78c9c5] {
  min-width: 74px;
  color: var(--text-dim);
}
.pop-money[data-v-af78c9c5] {
  font-weight: 700;
}
.pop-peak[data-v-af78c9c5] {
  color: var(--text-mute);
  margin-left: auto;
}

.detail-container[data-v-7d490766] {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.back-link[data-v-7d490766] {
  margin-bottom: 1rem;
}
.detail-header[data-v-7d490766] {
  margin-bottom: 1.5rem;
}
.detail-head-main[data-v-7d490766] {
  min-width: 0;
}
.title-row[data-v-7d490766] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.title-text[data-v-7d490766] {
  min-width: 0;
}
.source-icon[data-v-7d490766] {
  width: 72px;
  height: 72px;
  /* border-box — see Marketplace.vue .strategy-icon comment. */
  box-sizing: border-box;
  border-radius: 50%;
  background: rgb(3, 54, 26);
  object-fit: contain;
  /* Dope logo (95x122): corners of the source image are pure green bg, so
     clipping them costs nothing — drop padding for a larger, more legible
     logo. Stax bull overrides below. */
  padding: 4px;
  flex-shrink: 0;
}
.source-icon-stax[data-v-7d490766] {
  background: #0a0a1a;
  /* See Marketplace.vue .strategy-icon-stax — bull fills its viewBox; this
     is the math minimum padding to inscribe it inside the circle without
     clipping horn/back-leg tips. */
  padding: 11px;
}
.source-icon-backwoods[data-v-7d490766] {
  /* Square 175×175 illustration — corners are forest/sky background, subject
     (Bigfoot) is centered. Let it fill the circle. */
  background: #0a0a1a;
  padding: 0;
}
.source-icon-float[data-v-7d490766] {
  /* Square 1254×1254 illustration — iron butterfly centered on a dark disc,
     near-black corners. Let it fill the circle (same as .source-icon-backwoods). */
  background: #0a0a1a;
  padding: 0;
}
.source-icon-dan[data-v-7d490766] {
  /* Square illustration — cyan emblem centered on a dark navy field, flat
     background corners. Let it fill the circle (same as .source-icon-float). */
  background: #0a0a1a;
  padding: 0;
}

/* New dope avatar is a self-contained circular badge — see Marketplace.vue
   .strategy-icon-dope. Strip the shared base's background + padding so the
   artwork renders edge-to-edge instead of being ringed and zoomed out. */
.source-icon-dope[data-v-7d490766] {
  background: none;
  padding: 0;
}
.not-listed-badge[data-v-7d490766],
.subscriber-count-badge[data-v-7d490766],
.closed-membership-badge[data-v-7d490766] {
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.not-listed-badge[data-v-7d490766] {
  border-color: rgba(var(--accent-rgb), 0.3);
}
.subscriber-count-badge[data-v-7d490766] {
  border-color: rgba(var(--profit-rgb), 0.35);
}
.closed-membership-badge[data-v-7d490766] {
  border-color: var(--border-strong);
}
.meta-row[data-v-7d490766] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
}
.meta-item[data-v-7d490766] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  padding: 8px 14px;
}
.meta-label[data-v-7d490766] {
  font-size: 0.65rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.meta-value[data-v-7d490766] {
  font-size: 0.9rem;
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
}
.meta-value.price[data-v-7d490766] {
  color: var(--profit);
}

/* Owner-only listing editor trigger. Sits in the header meta row next to
   Author / Price / Signal Type, so it reads as "these are the fields you
   control". Hidden from doc screenshots via ALWAYS_HIDE in capture.mjs. */
.owner-edit-btn[data-v-7d490766] {
  align-self: stretch;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-md, 12px);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  transition: background 0.15s, border-color 0.15s;
}
.owner-edit-btn[data-v-7d490766]:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}
.type-badge[data-v-7d490766] {
  align-self: flex-start;
}
.type-badge-entry[data-v-7d490766] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.type-badge-exits[data-v-7d490766] {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}

/* Futures reuses the amber tone the Tradovate broker pill already uses
   (--cat-amber, see BrokerTypePill.vue) so "futures" reads the same color
   everywhere in the app. Sits next to the Entry+Exit / Entry-only pill. */
.type-badge-futures[data-v-7d490766] {
  margin-left: 0.35rem;
  background: rgba(var(--cat-amber-rgb), 0.15);
  color: var(--cat-amber);
  border: 1px solid rgba(var(--cat-amber-rgb), 0.4);
}
.section-card[data-v-7d490766] {
  margin-bottom: 1.5rem;
}

/* Capital sizing control */
.capital-control[data-v-7d490766] {
  margin-bottom: 1.5rem;
}
.capital-control-grid[data-v-7d490766] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
}
.capital-control .control-field[data-v-7d490766] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.capital-control label[data-v-7d490766] {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 500;
}
.capital-control .input-wrap[data-v-7d490766] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 140px;
}
.capital-control .input-wrap[data-v-7d490766]:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.capital-control .affix-left[data-v-7d490766],
.capital-control .affix-right[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.9rem;
  font-family: var(--mono);
}
.capital-control input[data-v-7d490766] {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  width: 100%;
  outline: none;
  padding: 0;
}

/* Hide native number-input spinners (cleaner look) */
.capital-control input[data-v-7d490766]::-webkit-outer-spin-button,
.capital-control input[data-v-7d490766]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.capital-control input[type='number'][data-v-7d490766] {
  -moz-appearance: textfield;
}
.capital-control .readout[data-v-7d490766] {
  display: flex;
  align-items: center;
  height: 38px; /* match rd-ui-input height */
  padding: 0 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 140px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.capital-control .hint[data-v-7d490766] {
  flex-basis: 100%;
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.4;
}
.contracts-sub[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.7rem;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.contracts-sub-leg[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.65rem;
  margin-top: 0.1rem;
}

/* Time sub-line under date cells (Opened / Closed) — appears only when the
   source row carries a real timestamp. Dope Spreads rows are date-only so
   this is hidden; signal-hub alerts have full ISO offsets so it shows. */
.time-sub[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.7rem;
  margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.count-pill[data-v-7d490766] {
  margin-left: 0.15rem;
}
.description[data-v-7d490766] {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}
.description-secondary[data-v-7d490766] {
  color: var(--text-mute);
}
.error-banner[data-v-7d490766] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  color: var(--loss);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.loading-state[data-v-7d490766] {
  margin-bottom: 1rem;
}
.empty-state p[data-v-7d490766] {
  margin: 0;
}

/* Stats grid */
.stats-grid[data-v-7d490766] {
  margin-bottom: 1.5rem;
}
.stat-value.positive[data-v-7d490766] {
  color: var(--profit);
}
.stat-value.negative[data-v-7d490766] {
  color: var(--loss);
}
.stat-sub[data-v-7d490766] {
  color: var(--text-mute);
}

/* Equity chart */
.chart-wrap[data-v-7d490766] {
  height: 280px;
  position: relative;
}

/* Trades table — base look comes from rd-rt; these are column-level tweaks */
.trades-table th.num[data-v-7d490766] {
  text-align: right;
}
.trades-table td.num[data-v-7d490766] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trades-table tbody tr.row-win[data-v-7d490766]:hover {
  background: rgba(var(--profit-rgb), 0.06);
}
.trades-table tbody tr.row-loss[data-v-7d490766]:hover {
  background: rgba(var(--loss-rgb), 0.06);
}
.trade-id[data-v-7d490766] {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.ticker[data-v-7d490766] {
  color: var(--text);
  font-weight: 700;
  font-family: var(--display);
}
.strikes[data-v-7d490766] {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.entry-exit[data-v-7d490766] {
  white-space: nowrap;
}
.entry-exit .arrow[data-v-7d490766] {
  color: var(--text-mute);
  margin: 0 0.4rem;
}
.positive[data-v-7d490766] {
  color: var(--profit);
}
.negative[data-v-7d490766] {
  color: var(--loss);
}

/* Type pill */
.type-pill[data-v-7d490766] {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: var(--mono);
}
.type-pill-wrap[data-v-7d490766] {
  position: relative;
  display: inline-block;
}
.type-pill-tooltip[data-v-7d490766] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: var(--mono);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.4));
}
.type-pill-wrap:hover .type-pill-tooltip[data-v-7d490766] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}
.pill-credit[data-v-7d490766] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.pill-debit[data-v-7d490766] {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.pill-iron[data-v-7d490766] {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.pill-generic[data-v-7d490766] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Result pill */
.result-pill[data-v-7d490766] {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pill-win[data-v-7d490766] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.pill-loss[data-v-7d490766] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
}

/* Pending classification (no exit broadcast) — neutral so it reads as
   "not yet a confirmed win/loss" rather than a profit/loss outcome. */
.pill-potential[data-v-7d490766] {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
}

/* Futures direction pill — the Currently Open table's stand-in for the
   option Type pill. The historical table styles its own copy. */
.dir-pill[data-v-7d490766] {
  font-size: 0.62rem;
}
.dir-long[data-v-7d490766] {
  background: rgba(var(--profit-rgb), 0.12);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.25);
}
.dir-short[data-v-7d490766] {
  background: rgba(var(--loss-rgb), 0.12);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.25);
}

/* Accent — distinct from win/loss/potential so the wheel-assigned rows read
   as a third category (intentional outcome) rather than a missed trade. */
.pill-wheel[data-v-7d490766] {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

/* Pink is the app-wide paper-trading color (BrokerTypePill's .pill-paper,
   the paper profit-header bar) — reuse the exact treatment so a PAPER tag
   here reads as the same thing it does everywhere else. */
.pill-paper[data-v-7d490766] {
  background: rgba(var(--paper-rgb), 0.15);
  color: var(--paper);
  border: 1px solid rgba(var(--paper-rgb), 0.4);
}

/* Sits after the WIN/LOSS pill rather than replacing it — the outcome is
   still the primary signal, paper is a qualifier on it. */
.paper-tag[data-v-7d490766] {
  margin-left: 0.35rem;
}
.wheel-banner[data-v-7d490766] {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}
.wheel-banner-icon[data-v-7d490766] {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.wheel-banner-copy strong[data-v-7d490766] {
  color: var(--text);
  font-weight: 600;
}
.wheel-banner-pill[data-v-7d490766] {
  margin: 0 0.15rem;
  vertical-align: 1px;
}

/* Same layout as the wheel banner, retinted pink to match the PAPER pill it
   explains. */
.paper-banner[data-v-7d490766] {
  background: rgba(var(--paper-rgb), 0.07);
  border-color: rgba(var(--paper-rgb), 0.25);
}
.paper-banner .wheel-banner-icon[data-v-7d490766] {
  color: var(--paper);
}
.max-badge[data-v-7d490766] {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  margin-right: 0.35rem;
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

/* Expander */
.expander-cell[data-v-7d490766] {
  width: 28px;
  text-align: center;
}
.expander-btn[data-v-7d490766] {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  width: 20px;
}
.legs-row td[data-v-7d490766] {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.legs-breakdown[data-v-7d490766] {
  padding: 0.5rem 0;
}
.legs-head[data-v-7d490766],
.legs-line[data-v-7d490766] {
  display: grid;
  grid-template-columns: 60px 60px 80px 80px 100px 100px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.35rem 0.25rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.legs-head[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legs-line[data-v-7d490766] {
  color: var(--text-dim);
}
.leg-tag[data-v-7d490766] {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
}
@media (max-width: 768px) {
.meta-row[data-v-7d490766] {
    gap: 1rem;
}
.stats-grid[data-v-7d490766] {
    grid-template-columns: repeat(2, 1fr);
}
}

/* Screenshot column + modal */
.screenshot-col[data-v-7d490766] {
  text-align: center;
  width: 48px;
}
.screenshot-btn[data-v-7d490766] {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.screenshot-btn[data-v-7d490766]:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.screenshot-empty[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.85rem;
}
.screenshot-modal-backdrop[data-v-7d490766] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.screenshot-modal[data-v-7d490766] {
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 8px);
  max-width: min(1100px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.screenshot-modal-header[data-v-7d490766] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--display);
  font-weight: 600;
}
.screenshot-modal-close[data-v-7d490766] {
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.5rem;
}
.screenshot-modal-close[data-v-7d490766]:hover {
  color: var(--text);
}
.screenshot-modal-body[data-v-7d490766] {
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.screenshot-figure[data-v-7d490766] {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.screenshot-figure img[data-v-7d490766] {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 4px;
  background: var(--bg);
}
.screenshot-figure figcaption[data-v-7d490766] {
  color: var(--text-mute);
  font-size: 0.8rem;
}

.ss-page[data-v-82f36834] {
  padding: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
  color: #e5e7eb;
}
.ss-header h1[data-v-82f36834] { margin: 0; font-size: 1.6rem;
}
.ss-header .subtitle[data-v-82f36834] {
  margin: 0.25rem 0 1.5rem;
  color: #9ca3af;
  font-size: 0.95rem;
}
.ss-empty[data-v-82f36834] {
  background: #1f2937;
  border: 1px solid #2d3748;
  border-radius: 8px;
  padding: 1.5rem;
  color: #9ca3af;
  text-align: center;
}
.ss-impersonation-banner[data-v-82f36834] {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.9rem;
}
.ss-impersonation-banner strong[data-v-82f36834] { color: #fde68a;
}

.ticker-blacklist[data-v-b56211a9] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tb-chips[data-v-b56211a9] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2rem;
  align-items: center;
}
.tb-chips.tb-empty[data-v-b56211a9] {
  padding: 0.35rem 0;
}
.tb-empty-hint[data-v-b56211a9] {
  font-size: 0.75rem;
  color: var(--text-mute);
  font-style: italic;
}
.tb-chip[data-v-b56211a9] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 20px;
  color: #e8e8ff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tb-chip-label[data-v-b56211a9] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tb-chip-remove[data-v-b56211a9] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(232, 232, 255, 0.7);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tb-chip-remove[data-v-b56211a9]:hover:not(:disabled) {
  background: rgba(255, 100, 100, 0.25);
  color: #fff;
}
.tb-chip-remove[data-v-b56211a9]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tb-input-row[data-v-b56211a9] {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.tb-input[data-v-b56211a9] {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  background: rgba(45, 45, 68, 0.3);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  transition: border-color 0.15s, background 0.15s;
}
.tb-input[data-v-b56211a9]:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(45, 45, 68, 0.5);
}
.tb-input[data-v-b56211a9]::placeholder {
  color: var(--text-mute);
  text-transform: none;
  font-family: inherit;
}
.tb-add[data-v-b56211a9] {
  padding: 0.45rem 0.9rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 6px;
  color: #e8e8ff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tb-add[data-v-b56211a9]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: var(--accent);
}
.tb-add[data-v-b56211a9]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tb-input-row.tb-reject .tb-input[data-v-b56211a9] {
  border-color: rgba(255, 100, 100, 0.7);
  background: rgba(255, 100, 100, 0.08);
}

.backtest-container[data-v-1b28cd97] {
  padding: 0 1rem;
}
.access-denied[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.access-denied h1[data-v-1b28cd97] {
  color: var(--loss);
  margin-bottom: 1rem;
}
.access-denied p[data-v-1b28cd97] {
  color: var(--text-mute);
}

/* Header now uses the shared .rd-page-head / .rd-page-title / .rd-page-sub
   styling; .subtitle margin handled by .rd-page-sub. */
.backtest-header .subtitle[data-v-1b28cd97] {
  margin-top: 6px;
}
.new-badge[data-v-1b28cd97] {
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 4px;
  color: #3b82f6;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@keyframes spin-1b28cd97 {
to { transform: rotate(360deg);
}
}

/* Main Content */
.backtest-content[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Run row — buttons below settings panel */
.run-row[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Settings Panel — rd-panel provides background/border/radius; we add
   the inner content padding below the rd-panel-head. */
.settings-panel[data-v-1b28cd97],
.results-panel[data-v-1b28cd97] {
  padding: 0 1.5rem 1.5rem;
}

/* rd-panel-head provides the title row; pull inner content up a touch and
   keep the configuration tabs flush under it. */
.settings-panel .rd-panel-head[data-v-1b28cd97],
.results-panel .rd-panel-head[data-v-1b28cd97],
.trades-section .rd-panel-head[data-v-1b28cd97] {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.trades-section[data-v-1b28cd97] {
  padding: 0 1.5rem 1.5rem;
}
.results-header.rd-panel-head[data-v-1b28cd97] {
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Tab Navigation */
.backtest-tabs[data-v-1b28cd97] {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.backtest-tab[data-v-1b28cd97] {
  padding: 0.65rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.backtest-tab[data-v-1b28cd97]:hover {
  color: var(--text-dim);
}
.backtest-tab.active[data-v-1b28cd97] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Panel titles now use the shared .rd-panel-title styling. */

/* ===== Sub-section primitive (mirrors Strategies.vue) ===== */
.settings-section[data-v-1b28cd97] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.settings-subsection[data-v-1b28cd97] {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.settings-subsection[data-v-1b28cd97]:first-child {
  margin-top: 0;
}
.settings-subsection > h3[data-v-1b28cd97] {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  color: #fff;
}
.settings-subsection > .section-note[data-v-1b28cd97] {
  margin: 0 0 1rem 0;
}
.settings-subsection > .setting-group[data-v-1b28cd97]:first-of-type {
  margin-top: 0;
}
.section-note[data-v-1b28cd97] {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--text-mute);
}

/* Alert Quality Filters — control layout copied from Strategies.vue so the
   backtest filters look and behave the same; themed with the local vars. */
.alert-filter-row[data-v-1b28cd97] {
  margin-bottom: 0.85rem;
}
.alert-filter-controls[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.alert-filter-controls select[data-v-1b28cd97] {
  flex: 0 0 9rem;
}
.alert-filter-controls input[data-v-1b28cd97] {
  flex: 1;
  min-width: 0;
}
.alert-filter-ratings[data-v-1b28cd97] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.alert-filter-range[data-v-1b28cd97] {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.alert-filter-range input[data-v-1b28cd97] {
  flex: 1;
  min-width: 0;
}
.alert-filter-range-sep[data-v-1b28cd97] {
  color: var(--text-mute);
  flex: 0 0 auto;
}
.rating-chip[data-v-1b28cd97] {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rating-chip[data-v-1b28cd97]:hover {
  border-color: var(--accent);
}
.rating-chip.active[data-v-1b28cd97] {
  background: var(--profit);
  border-color: var(--profit);
  color: #0c0c12;
  font-weight: 600;
}
.alert-filter-hint[data-v-1b28cd97] {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-mute);
}
.quality-filter-note[data-v-1b28cd97] {
  margin: 0.75rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-mute);
}
.quality-filter-note strong[data-v-1b28cd97] {
  color: var(--text-dim);
}
/* Louder when the active filters matched no data at all (they did nothing). */
.quality-filter-note.quality-filter-warn[data-v-1b28cd97] {
  color: var(--warning, #d98a00);
  font-weight: 500;
}
.quality-filter-note.quality-filter-warn strong[data-v-1b28cd97] {
  color: var(--warning, #d98a00);
}
.setting-group[data-v-1b28cd97] {
  margin-bottom: 1.25rem;
}
.setting-group label[data-v-1b28cd97] {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
}
.setting-group small[data-v-1b28cd97] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-mute);
}
.setting-group input[data-v-1b28cd97],
.setting-group select[data-v-1b28cd97] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}
.input-with-suffix[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.input-with-suffix input[data-v-1b28cd97] {
  border: none;
  background: transparent;
  flex: 1;
}
.input-with-suffix .suffix[data-v-1b28cd97] {
  padding: 0 0.75rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.input-with-prefix[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.input-with-prefix input[data-v-1b28cd97] {
  border: none;
  background: transparent;
  flex: 1;
}
.input-with-prefix .prefix[data-v-1b28cd97] {
  padding: 0 0.75rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.input-with-prefix .suffix[data-v-1b28cd97] {
  padding: 0 0.75rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.input-with-toggle[data-v-1b28cd97] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mode-toggle[data-v-1b28cd97] {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.mode-toggle button[data-v-1b28cd97] {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  min-width: 28px;
  transition: all 0.15s ease;
}
.mode-toggle button[data-v-1b28cd97]:hover {
  color: var(--text-mute);
}
.mode-toggle button.active[data-v-1b28cd97] {
  background: #8b5cf6;
  color: white;
}
.date-range-row[data-v-1b28cd97] {
  display: flex;
  gap: 1rem;
}
.date-input[data-v-1b28cd97] {
  flex: 1;
}
.date-input label[data-v-1b28cd97] {
  display: block;
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-bottom: 0.25rem;
}
.date-input input[type="date"][data-v-1b28cd97] {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.9rem;
}
.date-input input[type="date"][data-v-1b28cd97]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}
.date-quick-buttons[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.date-quick-buttons button[data-v-1b28cd97] {
  flex: 1;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #a0a0a0;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.date-quick-buttons button[data-v-1b28cd97]:hover {
  background: var(--border);
  border-color: var(--accent);
  color: #fff;
}

/* Market Event Skip Chips */
.market-event-chips[data-v-1b28cd97] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.event-chip[data-v-1b28cd97] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-mute);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.event-chip[data-v-1b28cd97]:hover {
  border-color: var(--accent);
  color: var(--text-dim);
}
.event-chip.active[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: #fff;
}
.event-chip-icon[data-v-1b28cd97] {
  font-size: 0.85rem;
}
.event-chip-label[data-v-1b28cd97] {
  font-weight: 500;
}
.event-chip-count[data-v-1b28cd97] {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-mute);
}
.event-chip.active .event-chip-count[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.25);
  color: #a5a8ff;
}
.segmented-control[data-v-1b28cd97] {
  display: flex;
  background: var(--bg);
  border-radius: 6px;
  padding: 3px;
}
.segmented-control button[data-v-1b28cd97] {
  flex: 1;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.segmented-control button.active[data-v-1b28cd97] {
  background: var(--accent);
  color: #fff;
}
.alert-source-select[data-v-1b28cd97] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
}
.alert-source-select optgroup[data-v-1b28cd97] {
  color: var(--text-mute);
  font-style: normal;
}
.alert-source-select option[data-v-1b28cd97] {
  color: #fff;
  background: var(--bg);
}
.trailing-mode-hint[data-v-1b28cd97] {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-mute);
  font-size: 0.75rem;
}
.timezone-hint[data-v-1b28cd97] {
  font-size: 0.75rem;
  color: var(--text-mute);
  font-weight: 400;
}
.time-range-row[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.time-input-group[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
}
.time-input-group select[data-v-1b28cd97] {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.2rem;
  cursor: pointer;
}
.time-sep[data-v-1b28cd97] {
  color: var(--text-mute);
  font-weight: 600;
}
.time-period[data-v-1b28cd97] {
  color: var(--text-mute);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}
.time-to[data-v-1b28cd97] {
  color: var(--text-mute);
  font-size: 0.8rem;
}
.toggle-row[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-checkbox[data-v-1b28cd97] {
  width: 40px;
  height: 20px;
  appearance: none;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-checkbox[data-v-1b28cd97]:checked {
  background: var(--accent);
}
.toggle-checkbox[data-v-1b28cd97]::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}
.toggle-checkbox[data-v-1b28cd97]:checked::before {
  transform: translateX(20px);
}

/* Toggle Switch (Settings-style) */
.toggle-label[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.toggle-label[data-v-1b28cd97]:hover {
  border-color: var(--accent);
}
.toggle-label.compact[data-v-1b28cd97] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border: none;
}
.toggle-label.compact[data-v-1b28cd97]:hover {
  border-color: transparent;
}
.toggle-label.compact .toggle-switch[data-v-1b28cd97] {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.toggle-label.compact .toggle-text[data-v-1b28cd97] {
  gap: 0.125rem;
}
.toggle-text[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.toggle-text strong[data-v-1b28cd97] {
  color: #fff;
  font-size: 0.85rem;
}
.toggle-text small[data-v-1b28cd97] {
  color: var(--text-mute);
  font-size: 0.75rem;
  margin: 0;
}
.toggle-switch[data-v-1b28cd97] {
  position: relative;
  width: 48px;
  height: 24px;
  background: rgba(var(--loss-rgb), 0.3);
  border: 1px solid rgba(var(--loss-rgb), 0.5);
  border-radius: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch[data-v-1b28cd97]::before {
  content: 'OFF';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--loss);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.toggle-switch[data-v-1b28cd97]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--loss);
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s ease;
}
.toggle-switch.active[data-v-1b28cd97] {
  background: rgba(var(--profit-rgb), 0.3);
  border-color: rgba(var(--profit-rgb), 0.5);
}
.toggle-switch.active[data-v-1b28cd97]::before {
  content: 'ON';
  left: 6px;
  color: var(--profit);
}
.toggle-switch.active[data-v-1b28cd97]::after {
  transform: translateX(24px);
  background: var(--profit);
}
.toggle-label.disabled[data-v-1b28cd97] {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-label.disabled .toggle-switch[data-v-1b28cd97] {
  pointer-events: none;
}
.beta-pill[data-v-1b28cd97] {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: #f59e0b;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.35rem;
}
.beta-pill.new-pill[data-v-1b28cd97] {
  background: var(--profit);
}

/* Slider Styles */
.slider-group label[data-v-1b28cd97] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.slider-value-input[data-v-1b28cd97] {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  gap: 1px;
}
.slider-value-input input[data-v-1b28cd97] {
  width: 3.2ch;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 2px;
  appearance: textfield;
  -moz-appearance: textfield;
  font-family: inherit;
}
.slider-value-input input[data-v-1b28cd97]::-webkit-outer-spin-button,
.slider-value-input input[data-v-1b28cd97]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.slider-value-input input[data-v-1b28cd97]:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.slider-value-input input[data-v-1b28cd97]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.slider-value-input.positive[data-v-1b28cd97] {
  color: var(--profit);
}
.slider-value-input.negative[data-v-1b28cd97] {
  color: var(--loss);
}
.slider[data-v-1b28cd97] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.slider[data-v-1b28cd97]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.slider[data-v-1b28cd97]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}
.slider[data-v-1b28cd97]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.slider-labels[data-v-1b28cd97] {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-mute);
}

/* Run button — visual chrome from .rd-tb-solid; we only size it for the row. */
.run-btn[data-v-1b28cd97] {
  flex: 1 1 200px;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}
.btn-spinner[data-v-1b28cd97] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-1b28cd97 0.8s linear infinite;
}
.error-message[data-v-1b28cd97] {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 6px;
  color: var(--loss);
  font-size: 0.85rem;
  text-align: center;
}
.warming-message[data-v-1b28cd97] {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb, 96, 165, 250), 0.12);
  border: 1px solid rgba(var(--accent-rgb, 96, 165, 250), 0.3);
  border-radius: 6px;
  color: var(--text-secondary, #9ca3af);
  font-size: 0.85rem;
  text-align: center;
}

/* Results Panel */
.no-results[data-v-1b28cd97] {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-mute);
}
.no-results .alerts-info[data-v-1b28cd97] {
  margin-top: 1rem;
  color: var(--text-mute);
}
.results-grid[data-v-1b28cd97] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 11px;
}

/* Result tiles — styled as the redesign's bt-stat tiles (rd-stat-cell look). */
.result-card[data-v-1b28cd97] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 15px;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.18s var(--ease-out);
}
.result-card[data-v-1b28cd97]:hover {
  border-color: var(--border-strong);
}
.result-label[data-v-1b28cd97] {
  display: block;
  font-size: 10.5px;
  color: var(--text-mute);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.result-value[data-v-1b28cd97] {
  display: block;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.result-value.positive[data-v-1b28cd97] {
  color: var(--profit);
}
.result-value.negative[data-v-1b28cd97] {
  color: var(--loss);
}
.result-sub[data-v-1b28cd97] {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 7px;
}
.result-card.positive[data-v-1b28cd97] {
  border-color: rgba(var(--profit-rgb), 0.35);
  background: linear-gradient(160deg, rgba(var(--profit-rgb), 0.08), var(--panel) 60%);
}
.result-card.negative[data-v-1b28cd97] {
  border-color: rgba(var(--loss-rgb), 0.35);
  background: linear-gradient(160deg, rgba(var(--loss-rgb), 0.08), var(--panel) 60%);
}
.result-card.wide[data-v-1b28cd97] {
  grid-column: span 2;
}
.blown-account-warning[data-v-1b28cd97] {
  grid-column: 1 / -1;
  padding: 0.75rem 1rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
  border-radius: 8px;
  color: var(--loss);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* Trades Table — rd-panel supplies background/border/radius; padding set above. */
.trades-table-wrapper[data-v-1b28cd97] {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 1600px;
}
.trades-table[data-v-1b28cd97] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.trades-table th[data-v-1b28cd97] {
  text-align: left;
  padding: 0.75rem;
  color: var(--text-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-2);
}
.trades-table td[data-v-1b28cd97] {
  padding: 0.75rem;
  border-bottom: 1px solid var(--panel-solid);
  color: var(--text-dim);
}
.trades-table tr:hover td[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.05);
}
.signal-cell[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.date-cell[data-v-1b28cd97] {
  font-size: 0.8rem;
  color: var(--text-mute);
  white-space: nowrap;
}
.qty-cell[data-v-1b28cd97] {
  text-align: center;
  font-weight: 600;
  color: var(--text-dim);
}
.ticker[data-v-1b28cd97] {
  font-weight: 600;
  color: #fff;
}
.direction[data-v-1b28cd97] {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
}
.direction.call[data-v-1b28cd97] {
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
}
.direction.put[data-v-1b28cd97] {
  background: rgba(var(--loss-rgb), 0.2);
  color: var(--loss);
}
.price[data-v-1b28cd97] {
  font-weight: 500;
  color: #fff;
}
.time[data-v-1b28cd97] {
  font-size: 0.75rem;
  color: var(--text-mute);
}
.positive[data-v-1b28cd97] {
  color: var(--profit);
}
.negative[data-v-1b28cd97] {
  color: var(--loss);
}
.exit-badge[data-v-1b28cd97] {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.exit-badge.profit[data-v-1b28cd97] {
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
}
.exit-badge.loss[data-v-1b28cd97] {
  background: rgba(var(--loss-rgb), 0.2);
  color: var(--loss);
}
.exit-badge.trailing[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
}
.exit-badge.eod[data-v-1b28cd97] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-mute);
}

/* Profit Lock exits are >= breakeven by construction — positive but visually
   distinct from a plain TAKE_PROFIT (dashed outline). */
.exit-badge.profit-lock[data-v-1b28cd97] {
  background: rgba(var(--profit-rgb), 0.12);
  color: var(--profit);
  border: 1px dashed rgba(var(--profit-rgb), 0.5);
}

/* ── Multi-Leg Exits + Profit Lock (Exit Targets) ── */
.bt-exit-legs[data-v-1b28cd97] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
.bt-exit-leg-row[data-v-1b28cd97] {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.bt-exit-leg-row[data-v-1b28cd97]:last-of-type {
  border-bottom: none;
}
.bt-exit-leg-index[data-v-1b28cd97] {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
}
.bt-exit-leg-fields[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.bt-exit-leg-fields label[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-mute);
  flex: 1;
  min-width: 0;
}
.bt-exit-leg-fields .input-with-suffix input[data-v-1b28cd97] {
  width: 100%;
  min-width: 0;
}
.bt-exit-leg-remove[data-v-1b28cd97] {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem;
  flex-shrink: 0;
}
.bt-exit-leg-remove[data-v-1b28cd97]:hover {
  color: var(--loss);
  border-color: var(--loss);
}
.bt-exit-legs-footer[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.bt-alloc-total[data-v-1b28cd97] {
  font-size: 0.75rem;
  color: var(--text-mute);
}
.bt-alloc-total.invalid[data-v-1b28cd97] {
  color: var(--loss);
  font-weight: 600;
}
.bt-profit-lock[data-v-1b28cd97] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
.bt-lock-hint[data-v-1b28cd97] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-mute);
  line-height: 1.4;
}
.result-pill[data-v-1b28cd97] {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.result-pill.win[data-v-1b28cd97] {
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
}
.result-pill.loss[data-v-1b28cd97] {
  background: rgba(var(--loss-rgb), 0.2);
  color: var(--loss);
}

/* Multi-Tier Configuration */
.tier-config-section[data-v-1b28cd97] {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.tier-config-header[data-v-1b28cd97] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.tier-label[data-v-1b28cd97] {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.tier-count[data-v-1b28cd97] {
  font-size: 0.8rem;
  color: var(--text-mute);
}
.tier-list[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tier-row[data-v-1b28cd97] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg);
  border-radius: 6px;
}
.tier-number[data-v-1b28cd97] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-mute);
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.tier-fields[data-v-1b28cd97] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier-field[data-v-1b28cd97] {
  width: 100%;
}
.tier-field-header[data-v-1b28cd97] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.tier-field-header label[data-v-1b28cd97] {
  font-size: 0.7rem;
  color: var(--text-mute);
}
.tier-slider[data-v-1b28cd97] {
  width: 100%;
  -webkit-appearance: none;
  background: var(--border);
  height: 4px;
  border-radius: 2px;
}
.tier-slider[data-v-1b28cd97]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.tier-slider[data-v-1b28cd97]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.tier-value-input[data-v-1b28cd97] {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.8rem;
  gap: 1px;
}
.tier-value-input input[data-v-1b28cd97] {
  width: 3ch;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  padding: 0 1px;
  appearance: textfield;
  -moz-appearance: textfield;
  font-family: inherit;
}
.tier-value-input input[data-v-1b28cd97]::-webkit-outer-spin-button,
.tier-value-input input[data-v-1b28cd97]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tier-value-input input[data-v-1b28cd97]:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.tier-value-input input[data-v-1b28cd97]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.tier-value-input.positive[data-v-1b28cd97] {
  color: var(--profit);
}
.tier-value-input.negative[data-v-1b28cd97] {
  color: var(--loss);
}
.tier-remove-btn[data-v-1b28cd97] {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
}
.tier-remove-btn[data-v-1b28cd97]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.15);
  border-color: var(--loss);
  color: var(--loss);
}
.tier-remove-btn[data-v-1b28cd97]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.add-tier-btn[data-v-1b28cd97] {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}
.add-tier-btn[data-v-1b28cd97]:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tier Tooltip */
.exit-reason-cell[data-v-1b28cd97] {
  position: relative;
}
.exit-badge-wrap[data-v-1b28cd97] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tier-tag[data-v-1b28cd97] {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  cursor: help;
}
.tier-tooltip[data-v-1b28cd97] {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 220px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.exit-badge-wrap:hover .tier-tooltip[data-v-1b28cd97] {
  display: block;
}
.tier-tooltip[data-v-1b28cd97]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 16px;
  border: 6px solid transparent;
  border-bottom-color: var(--border-strong);
}
.tier-tooltip-title[data-v-1b28cd97] {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.tier-tooltip-item[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-mute);
}
.tier-tooltip-item.active[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.15);
  color: #fff;
}
.tier-tooltip-idx[data-v-1b28cd97] {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-mute);
  flex-shrink: 0;
}
.tier-tooltip-item.active .tier-tooltip-idx[data-v-1b28cd97] {
  background: var(--accent);
  color: #fff;
}
.tier-tooltip-detail[data-v-1b28cd97] {
  white-space: nowrap;
}
.tier-tooltip-footer[data-v-1b28cd97] {
  margin-top: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
}
.tier-tooltip-footer.muted[data-v-1b28cd97] {
  color: var(--text-mute);
  font-weight: 400;
}

/* Responsive */
@media (max-width: 900px) {
.backtest-tabs[data-v-1b28cd97] {
    flex-wrap: wrap;
}
.results-grid[data-v-1b28cd97] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.results-grid[data-v-1b28cd97] {
    grid-template-columns: 1fr;
}
.result-card.wide[data-v-1b28cd97] {
    grid-column: span 1;
}
.hours-row[data-v-1b28cd97] {
    flex-direction: column;
}
}

/* ── Load From Strategy ─────────────────────────────────────────── */
.strategy-loader[data-v-1b28cd97] {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2a2a3e;
}
.strategy-loader-row[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.strategy-loader-select[data-v-1b28cd97] {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}
.strategy-loader-select[data-v-1b28cd97]:focus {
  outline: none;
  border-color: var(--accent);
}
.strategy-loader-btn[data-v-1b28cd97] {
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.strategy-loader-btn[data-v-1b28cd97]:hover:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.strategy-loader-btn[data-v-1b28cd97]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Saved Presets ──────────────────────────────────────────────── */
.saved-presets[data-v-1b28cd97] {
  margin-bottom: 1rem;
}
.saved-presets-label[data-v-1b28cd97] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 0.75rem 0;
  display: block;
}
.preset-list[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.saved-preset-item[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.saved-preset-item .preset-btn[data-v-1b28cd97] {
  flex: 1;
}
.preset-btn[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.preset-btn[data-v-1b28cd97]:hover {
  background: #252538;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.preset-btn.saved[data-v-1b28cd97] {
  border-left: 3px solid var(--accent);
}
.preset-btn.saved[data-v-1b28cd97]:hover {
  border-left-color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}
.preset-icon[data-v-1b28cd97] {
  font-size: 1.25rem;
}
.preset-info[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.preset-name[data-v-1b28cd97] {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.preset-desc[data-v-1b28cd97] {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.preset-delete-btn[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.preset-delete-btn[data-v-1b28cd97]:hover {
  background: rgba(var(--loss-rgb), 0.1);
  border-color: var(--loss);
  color: var(--loss);
}

/* Save Preset Row */
.save-preset-row[data-v-1b28cd97] {
  margin-bottom: 1.25rem;
}
.apply-to-bot-btn[data-v-1b28cd97] {
  margin-bottom: 1rem;
}
.save-preset-btn[data-v-1b28cd97] {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-dim);
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}
.save-preset-btn[data-v-1b28cd97]:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}
.save-preset-input-row[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.save-preset-input-row input[data-v-1b28cd97] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
}
.save-preset-input-row input[data-v-1b28cd97]:focus {
  border-color: var(--accent);
  outline: none;
}
.save-preset-input-row button[data-v-1b28cd97] {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  background: var(--bg-2);
  color: var(--text-dim);
}
.save-preset-input-row button[data-v-1b28cd97]:first-of-type {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.save-preset-input-row button[data-v-1b28cd97]:first-of-type:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.save-preset-input-row button[data-v-1b28cd97]:last-of-type:hover {
  border-color: var(--loss);
  color: var(--loss);
}

/* Preset message toast */
.preset-message[data-v-1b28cd97] {
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: #a0c4ff;
  font-size: 0.8rem;
}

/* ── Import / Export ──────────────────────────────────────────── */
.import-export-row[data-v-1b28cd97] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.import-export-btn[data-v-1b28cd97] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: #2a2a3e;
  color: var(--text-dim);
  border: 1px solid #3a3a4e;
  border-radius: 8px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.import-export-btn[data-v-1b28cd97]:hover { background: #3a3a4e; color: #fff;
}
.results-header[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.results-header h2[data-v-1b28cd97] { margin: 0;
}

/* Share Results — visual chrome from .rd-tb-ghost.sm; class retained for the
   screenshot clone which removes it via querySelector('.share-results-btn'). */

/* ── Outlier filter (view control, not a run setting) ──────────── */
.results-header-controls[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Single-line variant of the house toggle: no <small>, so the header doesn't
   grow a second row next to the Share Results button. */
.outlier-toggle[data-v-1b28cd97] {
  cursor: pointer;
  margin: 0;
}
.outlier-toggle .toggle-text strong[data-v-1b28cd97] { white-space: nowrap;
}
.outlier-toggle.disabled[data-v-1b28cd97] {
  opacity: 0.45;
  cursor: not-allowed;
}
.outlier-sens-row[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
}
.outlier-sens-label[data-v-1b28cd97] {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-right: 0.2rem;
}
.outlier-sens-btn[data-v-1b28cd97] {
  padding: 0.25rem 0.7rem;
  background: #2a2a3e;
  border: 1px solid #3a3a4e;
  border-radius: 999px;
  color: #aaa;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.outlier-sens-btn[data-v-1b28cd97]:hover { background: #3a3a4e; color: #fff;
}
.outlier-sens-btn.active[data-v-1b28cd97] {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.result-pill.outlier[data-v-1b28cd97] {
  background: rgba(255, 255, 255, 0.1);
  color: #999;
}
.trades-table tr.trade-row-excluded td[data-v-1b28cd97] {
  opacity: 0.4;
}
.trades-table tr.trade-row-excluded td.positive[data-v-1b28cd97],
.trades-table tr.trade-row-excluded td.negative[data-v-1b28cd97] {
  text-decoration: line-through;
}
.split-test-outlier-note[data-v-1b28cd97] {
  margin: 0 0 0.75rem;
}

/* ── Limit Entry Popup ─────────────────────────────────────────── */
.limit-entry-popup-overlay[data-v-1b28cd97] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.limit-entry-popup[data-v-1b28cd97] {
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
}
.limit-entry-popup h3[data-v-1b28cd97] {
  margin: 0 0 0.5rem 0;
  color: #fff;
  font-size: 1.1rem;
}
.limit-entry-popup p[data-v-1b28cd97] {
  margin: 0 0 1.25rem 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.4;
}
.limit-entry-options[data-v-1b28cd97] {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.limit-entry-btn[data-v-1b28cd97] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.limit-entry-btn strong[data-v-1b28cd97] {
  color: #fff;
  font-size: 0.9rem;
}
.limit-entry-btn small[data-v-1b28cd97] {
  color: var(--text-dim);
  font-size: 0.75rem;
}
.limit-entry-btn.limit[data-v-1b28cd97]:hover {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}
.limit-entry-btn.market[data-v-1b28cd97]:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.limit-entry-cancel[data-v-1b28cd97] {
  background: transparent;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.5rem;
  transition: color 0.2s;
}
.limit-entry-cancel[data-v-1b28cd97]:hover {
  color: var(--loss);
}

/* ── Trading Schedule Editor ──────────────────────────────────── */
.schedule-presets[data-v-1b28cd97] {
  margin-bottom: 1rem;
}
.schedule-presets label[data-v-1b28cd97] {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-bottom: 0.4rem;
}
.preset-buttons[data-v-1b28cd97] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.schedule-preset-btn[data-v-1b28cd97] {
  padding: 0.35rem 0.65rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.schedule-preset-btn[data-v-1b28cd97]:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}
.schedule-errors[data-v-1b28cd97] {
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}
.schedule-errors ul[data-v-1b28cd97] {
  margin: 0;
  padding-left: 1.25rem;
}
.schedule-errors li[data-v-1b28cd97] {
  color: var(--loss);
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}
.schedule-editor[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.schedule-day[data-v-1b28cd97] {
  background: rgba(45, 45, 68, 0.3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  transition: all 0.2s;
}
.schedule-day[data-v-1b28cd97]:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
}
.schedule-day.day-disabled[data-v-1b28cd97] {
  opacity: 0.6;
}
.day-header[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.day-toggle[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.day-toggle input[type="checkbox"][data-v-1b28cd97] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.day-name[data-v-1b28cd97] {
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
  min-width: 90px;
}
.day-blocks[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}
.time-block[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.time-block input[type="time"][data-v-1b28cd97] {
  padding: 0.35rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  width: 120px;
  cursor: text;
}
.time-block input[type="time"][data-v-1b28cd97]:focus {
  outline: none;
  border-color: var(--accent);
}
.time-separator[data-v-1b28cd97] {
  color: var(--text-mute);
  font-size: 0.8rem;
}
.remove-block-btn[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 4px;
  color: var(--loss);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.remove-block-btn[data-v-1b28cd97]:hover {
  background: rgba(var(--loss-rgb), 0.2);
  border-color: var(--loss);
}
.add-block-btn[data-v-1b28cd97] {
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  width: fit-content;
}
.add-block-btn[data-v-1b28cd97]:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-style: solid;
}
.day-disabled-text[data-v-1b28cd97] {
  color: var(--text-mute);
  font-size: 0.8rem;
  margin-top: 0.25rem;
  padding-left: 1.5rem;
  font-style: italic;
}
@media (max-width: 600px) {
.preset-buttons[data-v-1b28cd97] { flex-direction: column;
}
.schedule-preset-btn[data-v-1b28cd97] { width: 100%; text-align: center;
}
.time-block[data-v-1b28cd97] { flex-wrap: wrap;
}
.time-block input[type="time"][data-v-1b28cd97] { flex: 1; min-width: 110px;
}
.day-name[data-v-1b28cd97] { min-width: auto;
}
}

/* ── Split Test ──────────────────────────────────────────────── */

/* Split Test — visual chrome from .rd-tb-ghost; we only size it for the row. */
.split-test-btn[data-v-1b28cd97] {
  flex: 1 1 160px;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}
.modal-overlay[data-v-1b28cd97] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.split-test-modal[data-v-1b28cd97] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 900px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn-1b28cd97 0.2s ease-out;
}
@keyframes modalSlideIn-1b28cd97 {
from { opacity: 0; transform: translateY(-20px);
}
to { opacity: 1; transform: translateY(0);
}
}
.modal-close-x[data-v-1b28cd97] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}
.modal-close-x[data-v-1b28cd97]:hover { color: #fff; background: rgba(255, 255, 255, 0.1);
}
.modal-title[data-v-1b28cd97] {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #fff;
}
.modal-subtitle[data-v-1b28cd97] {
  margin: 0 0 1.25rem 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.strategy-slots[data-v-1b28cd97] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.strategy-slot[data-v-1b28cd97] {
  background: var(--bg);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
}
.slot-header[data-v-1b28cd97] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.slot-label[data-v-1b28cd97] {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.slot-remove[data-v-1b28cd97] {
  background: none;
  border: none;
  color: var(--text-mute);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.slot-remove[data-v-1b28cd97]:hover { color: var(--loss);
}
.strategy-select[data-v-1b28cd97] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-2);
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.add-strategy-btn[data-v-1b28cd97] {
  width: 100%;
  padding: 0.6rem;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.2s;
}
.add-strategy-btn[data-v-1b28cd97]:hover { border-color: var(--accent); color: var(--accent);
}
.split-test-hint[data-v-1b28cd97] {
  margin: 0 0 0.5rem 0;
  color: var(--text-mute);
  font-size: 0.8rem;
  text-align: center;
  font-style: italic;
}
.modal-footer[data-v-1b28cd97] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.btn-cancel[data-v-1b28cd97],
.btn-close[data-v-1b28cd97] {
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel[data-v-1b28cd97]:hover,
.btn-close[data-v-1b28cd97]:hover { border-color: var(--text-mute); color: #fff;
}
.btn-run-split[data-v-1b28cd97] {
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-run-split[data-v-1b28cd97]:hover:not(:disabled) { background: #5558dd;
}
.btn-run-split[data-v-1b28cd97]:disabled { opacity: 0.5; cursor: not-allowed;
}

/* Progress */
.split-test-progress[data-v-1b28cd97] {
  text-align: center;
  padding: 2rem 0;
}
.progress-bar-container[data-v-1b28cd97] {
  width: 100%;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.progress-bar-fill[data-v-1b28cd97] {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.progress-text[data-v-1b28cd97] {
  color: var(--text-dim);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Results Table */
.split-test-table-wrapper[data-v-1b28cd97] {
  overflow-x: auto;
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch;
  /* Explicit width cap so the wrapper (not the table) owns the horizontal
     axis — keeps the table scrollable inside the modal instead of pushing
     the modal wider than its max-width. */
  max-width: 100%;
}
.split-test-table[data-v-1b28cd97] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  /* Fixed layout so columns split evenly and long values wrap within their
     column rather than forcing the whole table wider than the wrapper. */
  table-layout: fixed;
}
.split-test-table th[data-v-1b28cd97],
.split-test-table td[data-v-1b28cd97] {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  /* Allow long numeric cells ("$21,524.04 (115.2%)") to wrap onto a second
     line instead of overflowing the modal. */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Header cells stay on a single line — short uppercase labels. */
.split-test-table th[data-v-1b28cd97] {
  white-space: nowrap;
}

/* Apply the dark header bg to the whole thead row so individually-sticky th
   cells (each its own positioning context) can never render with mismatched
   heights/backgrounds that look like a "stepped" gap. */
.split-test-table thead[data-v-1b28cd97],
.split-test-table thead tr[data-v-1b28cd97] {
  background: var(--bg);
}
.metric-header[data-v-1b28cd97],
.strategy-header[data-v-1b28cd97] {
  background: var(--bg);
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.metric-label[data-v-1b28cd97] {
  color: var(--text-dim);
  font-weight: 500;
}
.metric-value[data-v-1b28cd97] {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.highlight-best[data-v-1b28cd97] {
  color: var(--profit) !important;
  background: rgba(var(--profit-rgb), 0.08);
}
.highlight-worst[data-v-1b28cd97] {
  color: var(--loss) !important;
  background: rgba(var(--loss-rgb), 0.08);
}
.metric-error[data-v-1b28cd97] {
  color: var(--loss);
  font-style: italic;
  font-weight: 400;
}

/* Settings diff viewer (split test) */
.settings-diff[data-v-1b28cd97] {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
}
.settings-diff-summary[data-v-1b28cd97] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: #cfd3dc;
  list-style: none;
  padding: 0.25rem 0;
}
.settings-diff-summary[data-v-1b28cd97]::-webkit-details-marker {
  display: none;
}
.settings-diff-summary[data-v-1b28cd97]::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s ease;
  color: #8a90a0;
  font-size: 0.9rem;
}
.settings-diff[open] .settings-diff-summary[data-v-1b28cd97]::before {
  transform: rotate(90deg);
}
.settings-diff-badge[data-v-1b28cd97] {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.badge-diff[data-v-1b28cd97] {
  color: #f1c40f;
  background: rgba(241, 196, 15, 0.12);
  border: 1px solid rgba(241, 196, 15, 0.35);
}
.badge-match[data-v-1b28cd97] {
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.1);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.settings-diff-toggle[data-v-1b28cd97] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: #8a90a0;
  cursor: pointer;
}
.settings-diff-table .settings-diff-group-row td[data-v-1b28cd97] {
  background: rgba(255, 255, 255, 0.03);
  color: #8a90a0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}
.settings-diff-table .settings-diff-row[data-v-1b28cd97] {
  border-left: 2px solid #f1c40f;
}
.settings-diff-table .settings-diff-cell[data-v-1b28cd97] {
  background: rgba(241, 196, 15, 0.06);
  color: #f1c40f !important;
}
.settings-diff-empty[data-v-1b28cd97] {
  text-align: center;
  color: #8a90a0;
  padding: 1.25rem !important;
  font-style: italic;
}
@media (max-width: 600px) {
.split-test-modal[data-v-1b28cd97] {
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 95vh;
}
.split-test-table[data-v-1b28cd97] {
    font-size: 0.8rem;
}
.split-test-table th[data-v-1b28cd97],
  .split-test-table td[data-v-1b28cd97] {
    padding: 0.5rem;
}
}

.webhook-docs[data-v-d646d7f7] {
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  margin-top: 1rem;
  overflow: hidden;
}
.webhook-accordion-header[data-v-d646d7f7] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}
.webhook-accordion-header[data-v-d646d7f7]:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
.accordion-title h3[data-v-d646d7f7] {
  color: var(--accent);
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}
.accordion-title p[data-v-d646d7f7] {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.8rem;
}
.accordion-icon[data-v-d646d7f7] {
  color: var(--accent);
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.accordion-icon.expanded[data-v-d646d7f7] {
  transform: rotate(180deg);
}
.webhook-accordion-body[data-v-d646d7f7] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.25rem;
}
.webhook-accordion-body.expanded[data-v-d646d7f7] {
  max-height: 3000px;
  padding: 0 1.25rem 1.25rem 1.25rem;
}
.copy-toast[data-v-d646d7f7] {
  position: sticky;
  top: 0;
  align-self: flex-end;
  margin: 0 0 0.75rem auto;
  width: max-content;
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
}
.webhook-section[data-v-d646d7f7] {
  margin-bottom: 1.25rem;
}
.webhook-section[data-v-d646d7f7]:last-child {
  margin-bottom: 0;
}
.webhook-section h4[data-v-d646d7f7] {
  color: #fff;
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.webhook-endpoint[data-v-d646d7f7] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.webhook-endpoint code[data-v-d646d7f7] {
  flex: 1;
  color: var(--profit);
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.85rem;
  word-break: break-all;
}
.code-block[data-v-d646d7f7] {
  position: relative;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.code-block.small pre[data-v-d646d7f7] {
  font-size: 0.75rem;
}
.code-block.error[data-v-d646d7f7] {
  border-color: rgba(var(--loss-rgb), 0.3);
  background: rgba(var(--loss-rgb), 0.05);
}
.code-block pre[data-v-d646d7f7] {
  margin: 0;
  color: #e0e0e0;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-btn[data-v-d646d7f7] {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.copy-btn[data-v-d646d7f7]:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}
.code-block .copy-btn[data-v-d646d7f7] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.webhook-table[data-v-d646d7f7] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.webhook-table th[data-v-d646d7f7],
.webhook-table td[data-v-d646d7f7] {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.webhook-table th[data-v-d646d7f7] {
  color: var(--text-dim);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.2);
}
.webhook-table td[data-v-d646d7f7] {
  color: #e0e0e0;
}
.webhook-table td code[data-v-d646d7f7] {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.webhook-table tr:last-child td[data-v-d646d7f7] {
  border-bottom: none;
}
.webhook-table.compact[data-v-d646d7f7] {
  font-size: 0.8rem;
}
.webhook-table.compact th[data-v-d646d7f7],
.webhook-table.compact td[data-v-d646d7f7] {
  padding: 0.4rem 0.6rem;
}
.ticker-format[data-v-d646d7f7] {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.format-example[data-v-d646d7f7] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ticker-visual[data-v-d646d7f7] {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  background: rgba(var(--accent-rgb), 0.15);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  display: inline-block;
  align-self: flex-start;
}
.format-breakdown[data-v-d646d7f7] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.format-breakdown span[data-v-d646d7f7] {
  white-space: nowrap;
}
.format-breakdown strong[data-v-d646d7f7] {
  color: #e0e0e0;
}
.webhook-rules[data-v-d646d7f7] {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-dim);
}
.webhook-rules li[data-v-d646d7f7] {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.webhook-rules li[data-v-d646d7f7]:last-child {
  margin-bottom: 0;
}
.webhook-rules code[data-v-d646d7f7] {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.85rem;
}
.section-hint[data-v-d646d7f7] {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 0.75rem 0;
}
.code-block.pinescript[data-v-d646d7f7] {
  border-color: rgba(var(--profit-rgb), 0.3);
  background: rgba(var(--profit-rgb), 0.05);
}
.code-block.pinescript pre[data-v-d646d7f7] {
  color: var(--profit);
}
.pinescript-tips[data-v-d646d7f7] {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.pinescript-tips h5[data-v-d646d7f7] {
  color: #fff;
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.pinescript-tips ul[data-v-d646d7f7] {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.pinescript-tips li[data-v-d646d7f7] {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.pinescript-tips li[data-v-d646d7f7]:last-child {
  margin-bottom: 0;
}
.pinescript-tips strong[data-v-d646d7f7] {
  color: #e0e0e0;
}
.pinescript-tips code[data-v-d646d7f7] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.8rem;
}
@media (max-width: 768px) {
.webhook-docs[data-v-d646d7f7] {
    padding: 1rem;
}
.webhook-table[data-v-d646d7f7] {
    font-size: 0.75rem;
}
.webhook-table th[data-v-d646d7f7],
  .webhook-table td[data-v-d646d7f7] {
    padding: 0.4rem 0.5rem;
}
.code-block pre[data-v-d646d7f7] {
    font-size: 0.7rem;
}
}

.broker-section[data-v-3313d130] {
  /* Inherits .settings-section styles from Settings.vue's global stylesheet. */
}
.broker-restart-banner[data-v-3313d130] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.broker-restart-banner .banner-text[data-v-3313d130] {
  flex: 1;
  font-size: 0.85rem;
}
.broker-restart-banner .banner-broker[data-v-3313d130] {
  color: #f59e0b;
  font-weight: 600;
}
.banner-restart[data-v-3313d130] {
  background: #f59e0b;
  border: 1px solid #f59e0b;
  color: var(--bg-2);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.banner-restart[data-v-3313d130]:hover:not(:disabled) {
  background: #fbbf24;
  border-color: #fbbf24;
}
.banner-restart[data-v-3313d130]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.banner-dismiss[data-v-3313d130] {
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}
.banner-dismiss[data-v-3313d130]:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.1);
}
.banner-dismiss[data-v-3313d130]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.broker-status-line[data-v-3313d130] {
  color: var(--text-dim);
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
}
.broker-status-pending[data-v-3313d130] {
  color: #f59e0b;
  margin-left: 0.5rem;
  font-size: 0.85rem;
}
.broker-locked-note[data-v-3313d130] {
  color: #f59e0b;
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
}
.broker-picker[data-v-3313d130] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.broker-option[data-v-3313d130] {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: #16161f;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.broker-option[data-v-3313d130]:hover:not(:disabled) {
  border-color: var(--accent);
  color: #fff;
}
.broker-option.active[data-v-3313d130] {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: #fff;
}
.broker-option.disabled[data-v-3313d130],
.broker-option[data-v-3313d130]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.broker-option-label[data-v-3313d130] {
  font-size: 0.95rem;
  font-weight: 600;
}
.broker-option-sub[data-v-3313d130] {
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.broker-option-sub.broker-option-active[data-v-3313d130] {
  color: var(--accent);
}
.broker-loading[data-v-3313d130] {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin: 0.5rem 0;
}

/* Paper sub-panel */
.paper-subpanel[data-v-3313d130] {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paper-subpanel h3[data-v-3313d130] {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
}
.paper-card[data-v-3313d130] {
  background: #16161f;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.paper-card-header[data-v-3313d130] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.paper-card-header h4[data-v-3313d130] {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
}
.paper-card-hint[data-v-3313d130] {
  margin: 0;
  color: var(--text-mute);
  font-size: 0.75rem;
  line-height: 1.4;
}
.paper-cash[data-v-3313d130] {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--profit);
}
.paper-cash-meta[data-v-3313d130] {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: #aaa;
}
.paper-cash-meta strong[data-v-3313d130] {
  color: var(--text-dim);
}
.paper-cash-row[data-v-3313d130] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.paper-cash-field[data-v-3313d130] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 160px;
}
.paper-field-label[data-v-3313d130] {
  font-size: 0.7rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.input-with-prefix[data-v-3313d130] {
  display: flex;
  align-items: center;
  background: #0d0d18;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.input-with-prefix .prefix[data-v-3313d130] {
  padding: 0 0.5rem;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.input-with-prefix input[data-v-3313d130] {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 0.4rem 0.4rem 0.4rem 0;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}
.paper-actions[data-v-3313d130] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.paper-btn[data-v-3313d130] {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.paper-btn[data-v-3313d130]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.paper-btn-primary[data-v-3313d130] {
  background: var(--accent);
  color: #fff;
}
.paper-btn-primary[data-v-3313d130]:hover:not(:disabled) {
  background: var(--accent-2);
}
.paper-btn-secondary[data-v-3313d130] {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border-strong);
}
.paper-btn-secondary[data-v-3313d130]:hover:not(:disabled) {
  border-color: var(--accent);
  color: #fff;
}
.paper-btn-danger[data-v-3313d130] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border-color: rgba(var(--loss-rgb), 0.4);
}
.paper-btn-danger[data-v-3313d130]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.25);
}
.slippage-rows[data-v-3313d130] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.slippage-rows.disabled[data-v-3313d130] {
  opacity: 0.55;
}
.slippage-row[data-v-3313d130] {
  display: grid;
  grid-template-columns: 60px auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.slippage-row-label[data-v-3313d130] {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
}
.slippage-row input[data-v-3313d130] {
  background: #0d0d18;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}
.slippage-row .target-hint[data-v-3313d130] {
  color: var(--text-mute);
  font-size: 0.7rem;
  text-align: right;
  min-width: 130px;
}
.mode-selector[data-v-3313d130] {
  display: inline-flex;
  background: #0d0d18;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.mode-selector button[data-v-3313d130] {
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.mode-selector button[data-v-3313d130]:hover:not(:disabled) {
  color: #fff;
}
.mode-selector button.active[data-v-3313d130] {
  background: var(--accent);
  color: #fff;
}
.mode-selector button[data-v-3313d130]:disabled {
  cursor: not-allowed;
}
.danger-zone[data-v-3313d130] {
  border-color: rgba(var(--loss-rgb), 0.3);
  background: rgba(var(--loss-rgb), 0.05);
}
.danger-text[data-v-3313d130] {
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

/* Toggle (matches Settings.vue conventions) */
.toggle-label[data-v-3313d130] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.toggle-label.compact[data-v-3313d130] {
  gap: 0.4rem;
}
.toggle-label input[type="checkbox"][data-v-3313d130] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.toggle-switch[data-v-3313d130] {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s;
}
.toggle-switch[data-v-3313d130]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.toggle-label input:checked + .toggle-switch[data-v-3313d130] {
  background: var(--accent);
}
.toggle-label input:checked + .toggle-switch[data-v-3313d130]::after {
  transform: translateX(14px);
}

/* Modals (reuse Settings.vue's modal-overlay / .modal classes are global,
   but this component defines its own local scoped styles for the broker
   modals to keep them self-contained.) */
.modal-overlay[data-v-3313d130] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.broker-modal[data-v-3313d130] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(520px, 90vw);
  max-height: 85vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-3313d130] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3[data-v-3313d130] {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}
.modal-close[data-v-3313d130] {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.modal-body[data-v-3313d130] {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}
.modal-footer[data-v-3313d130] {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.btn-primary[data-v-3313d130] {
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-primary[data-v-3313d130]:hover:not(:disabled) {
  background: var(--accent-2);
}
.btn-primary[data-v-3313d130]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary[data-v-3313d130] {
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-secondary[data-v-3313d130]:hover:not(:disabled) {
  border-color: var(--accent);
  color: #fff;
}
.info-banner[data-v-3313d130] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
}
.info-banner.warning[data-v-3313d130] {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}
.info-icon[data-v-3313d130] {
  font-size: 1rem;
}
.broker-positions-list[data-v-3313d130] {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  max-height: 200px;
  overflow: auto;
}
.position-symbol[data-v-3313d130] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.position-qty[data-v-3313d130] {
  color: var(--text-mute);
  margin-left: 0.5rem;
}
.missing-list[data-v-3313d130] {
  margin: 0;
  padding-left: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #f59e0b;
}
.force-checkbox[data-v-3313d130] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}
.force-checkbox input[data-v-3313d130] {
  margin-top: 0.2rem;
}
.reset-confirm-input[data-v-3313d130] {
  background: #0d0d18;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #fff;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
}

/* Mirrors the Strategies.vue form language (its styles are scoped, so the
   shared rules are duplicated here for this component's own elements). */
.settings-subsection[data-v-cc9e862e] {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.settings-subsection > h3[data-v-cc9e862e] {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
}
.unit-hint[data-v-cc9e862e] {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  vertical-align: middle;
}
.section-note[data-v-cc9e862e] {
  margin: 0 0 1rem 0;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.setting-row[data-v-cc9e862e] {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.settings-subsection > .setting-row[data-v-cc9e862e]:first-of-type {
  margin-top: 0;
}
.setting-row.two-col[data-v-cc9e862e] {
  grid-template-columns: repeat(2, 1fr);
}
.setting-item label[data-v-cc9e862e] {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.setting-item small[data-v-cc9e862e] {
  display: block;
  margin-top: 0.375rem;
  color: var(--text-mute);
  font-size: 0.8rem;
}
.setting-item input[type="number"][data-v-cc9e862e],
.setting-item select[data-v-cc9e862e] {
  width: 100%;
  height: 42px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--bg);
  color: #fff;
}
.setting-item input[data-v-cc9e862e]:focus,
.setting-item select[data-v-cc9e862e]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.setting-item select[data-v-cc9e862e] {
  cursor: pointer;
}
.input-with-suffix[data-v-cc9e862e] {
  display: flex;
  align-items: stretch;
  height: 42px;
}
.input-with-suffix input[data-v-cc9e862e] {
  flex: 1;
  height: 100%;
}
.input-with-suffix .suffix[data-v-cc9e862e] {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--border);
  color: var(--text-mute);
  font-size: 0.9rem;
  height: 100%;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 6px 6px 0;
}
.scale-selector[data-v-cc9e862e] {
  display: flex;
  gap: 0;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.scale-selector button[data-v-cc9e862e] {
  flex: 1;
  border: none;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.scale-selector button.active[data-v-cc9e862e] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-weight: 600;
}
.toggle-label[data-v-cc9e862e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.toggle-label[data-v-cc9e862e]:hover {
  border-color: var(--accent);
}
.toggle-label.compact[data-v-cc9e862e] {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.875rem;
}
.toggle-text[data-v-cc9e862e] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.toggle-text strong[data-v-cc9e862e] {
  color: #fff;
  font-size: 0.95rem;
}
.toggle-text small[data-v-cc9e862e] {
  color: var(--text-mute);
  font-size: 0.8rem;
  margin: 0;
}
.toggle-switch[data-v-cc9e862e] {
  position: relative;
  width: 58px;
  height: 28px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.3s var(--ease-out);
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch[data-v-cc9e862e]::before {
  content: 'OFF';
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.toggle-switch[data-v-cc9e862e]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.toggle-switch.active[data-v-cc9e862e] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}
.toggle-switch.active[data-v-cc9e862e]::before {
  content: 'ON';
  left: 10px;
  color: var(--accent-ink);
}
.toggle-switch.active[data-v-cc9e862e]::after {
  transform: translateX(30px);
  background: #fff;
}
.tiers-editor[data-v-cc9e862e] {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.tier-row[data-v-cc9e862e] {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.tier-label[data-v-cc9e862e] {
  min-width: 3.25rem;
  padding-bottom: 0.7rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}
.tier-field[data-v-cc9e862e] {
  flex: 1;
}
.tier-field label[data-v-cc9e862e] {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-mute);
}
.tier-field input[data-v-cc9e862e] {
  width: 100%;
  height: 38px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: #fff;
  font-size: 0.9rem;
}
.tier-field .input-with-suffix[data-v-cc9e862e] {
  height: 38px;
}
.tier-remove[data-v-cc9e862e] {
  height: 38px;
  width: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-mute);
  font-size: 1.1rem;
  cursor: pointer;
}
.tier-remove[data-v-cc9e862e]:hover {
  color: var(--loss);
  border-color: var(--loss);
}
.tiers-footer[data-v-cc9e862e] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.add-tier-btn[data-v-cc9e862e] {
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}
.add-tier-btn[data-v-cc9e862e]:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.add-tier-btn[data-v-cc9e862e]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tiers-error[data-v-cc9e862e] {
  color: var(--loss);
  font-size: 0.8rem;
}
@media (max-width: 640px) {
.setting-row.two-col[data-v-cc9e862e] {
    grid-template-columns: 1fr;
}
}

/* ===== Page Layout ===== */
.strategies-container[data-v-0d4f8059] {
  max-width: 1100px;
  margin: 0 auto;
}
.strategies-header[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.header-left[data-v-0d4f8059] {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.header-title-group[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
}
.strategies-header h1[data-v-0d4f8059] {
  margin: 0;
}

/* page title sits above the badge baseline */
.header-left .active-badge[data-v-0d4f8059] {
  margin-bottom: 2px;
}
.active-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

/* rd-tb-solid drives the accent gradient + glow; keep sizing + disabled here */
.btn-new-strategy[data-v-0d4f8059] {
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-new-strategy[data-v-0d4f8059]:disabled {
  background: var(--border-strong);
  color: var(--text-mute);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* ===== Global Settings Box (glass panel) ===== */
.global-settings-box[data-v-0d4f8059] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s var(--ease-out);
}
.global-settings-box[data-v-0d4f8059]:hover {
  border-color: var(--border-strong);
}
.global-settings-header[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s;
}
.global-settings-header[data-v-0d4f8059]:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
.global-header-left[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.global-settings-header h2[data-v-0d4f8059] {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.global-trading-off-badge[data-v-0d4f8059] {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(var(--loss-rgb), 0.2);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
  border-radius: 4px;
  color: var(--loss);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.global-settings-body[data-v-0d4f8059] {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}
.global-settings-body .settings-section[data-v-0d4f8059] {
  margin-top: 1rem;
}
.global-settings-body .section-title[data-v-0d4f8059] {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
}
.global-settings-actions[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.global-settings-actions .message[data-v-0d4f8059] {
  margin: 0;
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Killswitch Styles */
.killswitch-subsection[data-v-0d4f8059] {
  margin-bottom: 1rem;
}
.killswitch-subsection h4[data-v-0d4f8059] {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0.5rem 0 0.25rem 0;
}
.killswitch-subsection-help[data-v-0d4f8059] {
  margin: 0 0 0.5rem 0;
  color: var(--text-mute);
}
.killswitch-subsection-help small[data-v-0d4f8059] {
  font-size: 0.8rem;
  line-height: 1.4;
}
.killswitch-row[data-v-0d4f8059] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.killswitch-header[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
}
.killswitch-target[data-v-0d4f8059] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.killswitch-target.disabled[data-v-0d4f8059] {
  opacity: 0.4;
  pointer-events: none;
}
.killswitch-target .target-hint[data-v-0d4f8059] {
  font-size: 0.75rem;
  color: var(--text-mute);
  text-align: right;
}
.input-with-mode.compact[data-v-0d4f8059] {
  display: flex;
  gap: 0;
}
.input-with-mode.compact .mode-selector[data-v-0d4f8059] {
  display: flex;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
}
.input-with-mode.compact .mode-selector button[data-v-0d4f8059] {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  background: #2a2a3e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  color: var(--text-mute);
  cursor: pointer;
  transition: all 0.2s;
}
.input-with-mode.compact .mode-selector button[data-v-0d4f8059]:first-child {
  border-radius: 6px 0 0 6px;
}
.input-with-mode.compact .mode-selector button[data-v-0d4f8059]:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.input-with-mode.compact .mode-selector button.active[data-v-0d4f8059] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.input-with-mode.compact .mode-selector button[data-v-0d4f8059]:disabled {
  cursor: not-allowed;
}
.input-with-mode.compact input[data-v-0d4f8059] {
  width: 80px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  background: var(--bg-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 6px 6px 0;
  color: #fff;
  text-align: right;
}
.input-with-mode.compact input[data-v-0d4f8059]:disabled {
  background: #0d0d1a;
  color: var(--text-mute);
}
.account-type-selector[data-v-0d4f8059] {
  display: inline-flex;
  gap: 0;
}
.account-type-selector button[data-v-0d4f8059] {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-strong);
  background: var(--border);
  color: var(--text-mute);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.account-type-selector button[data-v-0d4f8059]:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.account-type-selector button[data-v-0d4f8059]:last-child {
  border-radius: 0 6px 6px 0;
}
.account-type-selector button.active[data-v-0d4f8059] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.account-type-selector button[data-v-0d4f8059]:hover:not(.active) {
  background: var(--border-strong);
  color: var(--text-dim);
}
.global-disabled-banner[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #d97706;
}
.banner-icon[data-v-0d4f8059] {
  font-size: 1.2rem;
  flex-shrink: 0;
}
@media (max-width: 600px) {
.killswitch-row[data-v-0d4f8059] {
    flex-direction: column;
    gap: 1rem;
}
.killswitch-target[data-v-0d4f8059] {
    width: 100%;
    align-items: stretch;
}
.input-with-mode.compact[data-v-0d4f8059] {
    width: 100%;
}
.input-with-mode.compact input[data-v-0d4f8059] {
    flex: 1;
    width: auto;
}
.killswitch-target .target-hint[data-v-0d4f8059] {
    text-align: left;
}
}

/* ===== Message ===== */
.message[data-v-0d4f8059] {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  font-weight: 500;
}
.message.error[data-v-0d4f8059] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
}

/* ===== Loading ===== */
.loading-state[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--text-mute);
}
.spinner[data-v-0d4f8059] {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-0d4f8059 0.8s linear infinite;
}
@keyframes spin-0d4f8059 {
to { transform: rotate(360deg);
}
}

/* ===== Empty State ===== */
.empty-state[data-v-0d4f8059] {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-mute);
}
.empty-icon[data-v-0d4f8059] {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}
.empty-state h3[data-v-0d4f8059] {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: var(--text-dim);
}
.empty-state p[data-v-0d4f8059] {
  margin: 0 0 1.5rem 0;
  font-size: 0.95rem;
}

/* ===== Strategy List ===== */
.strategy-list[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ===== Strategy Card (glass panel) ===== */
.strategy-card[data-v-0d4f8059] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.strategy-card[data-v-0d4f8059]:hover {
  border-color: var(--border-strong);
}
.strategy-card.enabled[data-v-0d4f8059] {
  border-left: 3px solid rgba(var(--profit-rgb), 0.5);
}
.strategy-card.expanded[data-v-0d4f8059] {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

/* While the ⋯ menu is open, let the dropdown escape the card's clip and lift the
 * whole card (its own stacking context, from backdrop-filter) above later
 * sibling cards so the popover isn't hidden behind the next row. */
.strategy-card.menu-open[data-v-0d4f8059] {
  position: relative;
  z-index: 100;
  overflow: visible;
}

/* Card Header */
.card-header[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  gap: 1rem;
}
.card-header[data-v-0d4f8059]:hover {
  background: rgba(255, 255, 255, 0.02);
}
.card-header-left[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.card-header-right[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.strategy-name[data-v-0d4f8059] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--display);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Note shown when strategies of the inactive asset class are hidden. */
.hidden-strategies-note[data-v-0d4f8059] {
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Futures strategy designation — amber, matching the TVT broker pill family. */
.futures-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  color: #f59e0b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.profit-lock-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 12px;
  color: #34d399;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Per-strategy killswitch — armed badge (amber) + locked badge (red). */
.killswitch-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.killswitch-locked-badge[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: rgba(var(--loss-rgb), 0.18);
  border: 1px solid rgba(var(--loss-rgb), 0.55);
  border-radius: 12px;
  color: var(--loss);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Per-strategy killswitch lock banner (mirrors the account-wide banner in Trades.vue). */
.ks-lock-banner[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(var(--loss-rgb), 0.18), rgba(127, 29, 29, 0.28));
  border: 1px solid rgba(var(--loss-rgb), 0.55);
  border-radius: 12px;
  margin: 0 1rem 1rem;
  color: #fee2e2;
}
.ks-lock-icon[data-v-0d4f8059] {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.ks-lock-body[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
}
.ks-lock-title[data-v-0d4f8059] {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #fef2f2;
}
.ks-lock-detail[data-v-0d4f8059] {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #fecaca;
}
.ks-lock-detail strong[data-v-0d4f8059] {
  color: #fff;
  font-weight: 600;
}
.ks-unlock-btn[data-v-0d4f8059] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #b91c1c;
  color: #fff;
  border: 1px solid var(--loss);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ks-unlock-btn[data-v-0d4f8059]:hover:not(:disabled) {
  background: var(--loss);
}
.ks-unlock-btn[data-v-0d4f8059]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.ks-override-note[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(var(--profit-rgb), 0.12), rgba(var(--profit-rgb), 0.06));
  border: 1px solid rgba(var(--profit-rgb), 0.4);
  border-radius: 12px;
  margin: 0 1rem 1rem;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}
.alloc-summary[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: var(--text-mute);
  flex-shrink: 0;
}

/* Card Toggle (in header) */
.card-toggle[data-v-0d4f8059] {
  flex-shrink: 0;
}

/* Expand Arrow */
.expand-arrow[data-v-0d4f8059] {
  color: var(--text-mute);
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}
.expand-arrow.expanded[data-v-0d4f8059] {
  transform: rotate(180deg);
}

/* Card overflow (kebab) menu */
.card-menu[data-v-0d4f8059] {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.card-menu-btn[data-v-0d4f8059] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-mute);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.card-menu-btn[data-v-0d4f8059]:hover,
.card-menu-btn.open[data-v-0d4f8059] {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.card-menu-popover[data-v-0d4f8059] {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  background: var(--panel-solid);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 10px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
  min-width: 9rem;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
}
.card-menu-item[data-v-0d4f8059] {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.card-menu-item[data-v-0d4f8059]:hover {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text);
}
.card-menu-item[data-v-0d4f8059]:disabled {
  opacity: 0.55;
  cursor: default;
}
.card-menu-item.danger[data-v-0d4f8059] {
  color: var(--loss, #ef4444);
}
.card-menu-item.danger[data-v-0d4f8059]:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--loss, #ef4444);
}

/* Share-code result modal */
.share-code-modal-desc[data-v-0d4f8059] {
  margin: 0 0 1rem;
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.5;
}
.share-code-display[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 10px;
}
.share-code-value[data-v-0d4f8059] {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  user-select: all;
  word-break: break-all;
}
.share-code-copy[data-v-0d4f8059] {
  flex-shrink: 0;
}
.share-code-modal-hint[data-v-0d4f8059] {
  margin: 0.85rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--text-mute);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Card Body */
.card-body[data-v-0d4f8059] {
  border-top: 1px solid var(--border);
  padding: 1.25rem;
}

/* ===== Card Tabs ===== */
.card-tabs[data-v-0d4f8059] {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.card-tabs[data-v-0d4f8059]::-webkit-scrollbar {
  display: none;
}
.card-tab[data-v-0d4f8059] {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.card-tab[data-v-0d4f8059]:hover:not(.active) {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
}
.card-tab.active[data-v-0d4f8059] {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

/* ===== Card Actions ===== */
.card-actions[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-actions-left[data-v-0d4f8059] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.btn-delete[data-v-0d4f8059] {
  padding: 0.6rem 1rem;
  background: transparent;
  border: 1px solid rgba(var(--loss-rgb), 0.5);
  border-radius: 8px;
  color: var(--loss);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-delete[data-v-0d4f8059]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.1);
  border-color: var(--loss);
}
.btn-delete[data-v-0d4f8059]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-danger[data-v-0d4f8059] {
  padding: 0.6rem 1.25rem;
  background: var(--loss);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-danger[data-v-0d4f8059]:hover:not(:disabled) {
  background: #c0392b;
}
.btn-danger[data-v-0d4f8059]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Modal ===== */
.modal-overlay[data-v-0d4f8059] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal[data-v-0d4f8059] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-large[data-v-0d4f8059] {
  max-width: 760px;
}
.modal-header[data-v-0d4f8059] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  z-index: 1;
}
.modal-header h3[data-v-0d4f8059] {
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
}
.modal-close[data-v-0d4f8059] {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close[data-v-0d4f8059]:hover {
  color: #fff;
}
.modal-body[data-v-0d4f8059] {
  padding: 1.5rem;
}
.modal-body-scrollable[data-v-0d4f8059] {
  overflow-y: auto;
}
.modal-footer[data-v-0d4f8059] {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--panel-solid);
}

/* ===== Risk Acknowledgment Modal ===== */
.info-banner.warning[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #ffc107;
}
.info-banner.warning .info-icon[data-v-0d4f8059] {
  font-size: 1.2rem;
}
.modal-risk-content[data-v-0d4f8059] {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #c0c0d0;
}
.modal-risk-content p[data-v-0d4f8059] {
  margin: 0.75rem 0;
}
.modal-risk-content ul[data-v-0d4f8059] {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}
.modal-risk-content li[data-v-0d4f8059] {
  margin: 0.25rem 0;
}
.modal-risk-content a[data-v-0d4f8059] {
  color: #5b8af5;
  text-decoration: none;
}
.modal-risk-content a[data-v-0d4f8059]:hover {
  text-decoration: underline;
}

/* ===== Sub-section primitive (uniform across all strategy tabs) ===== */
.settings-subsection[data-v-0d4f8059] {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.settings-subsection[data-v-0d4f8059]:first-child {
  margin-top: 0;
}
.settings-subsection > h3[data-v-0d4f8059] {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
}
.settings-subsection > .section-note[data-v-0d4f8059] {
  margin: 0 0 1rem 0;
}
.settings-subsection > .setting-row[data-v-0d4f8059]:first-of-type {
  margin-top: 0;
}
.alert-filter-row[data-v-0d4f8059] {
  margin-bottom: 0.5rem;
}
.alert-filter-controls[data-v-0d4f8059] {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.alert-filter-controls select[data-v-0d4f8059] {
  flex: 0 0 9rem;
}
.alert-filter-controls input[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
}

/* Rating multi-select: descriptor chips shown in place of the number input
   when the operator is "rating". Selected chips read as included. */
.alert-filter-ratings[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* Range: two number inputs ("between") shown in place of the single value
   input when the operator is "range". */
.alert-filter-range[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.alert-filter-range input[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
}
.alert-filter-range-sep[data-v-0d4f8059] {
  color: #9a9ab0;
  flex: 0 0 auto;
}
.rating-chip[data-v-0d4f8059] {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #3a3a52;
  background: #15151f;
  color: #c9c9da;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rating-chip[data-v-0d4f8059]:hover {
  border-color: #4a4a66;
}
.rating-chip.active[data-v-0d4f8059] {
  background: var(--profit);
  border-color: var(--profit);
  color: #0c0c12;
  font-weight: 600;
}
.alert-filter-hint[data-v-0d4f8059] {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #9a9ab0;
}

/* Inline label hint, e.g. "Max Trades Per Day (0 = unlimited)". */
.hint[data-v-0d4f8059] {
  font-size: 0.75rem;
  font-weight: 400;
  color: #9a9ab0;
}

/* ===== Shared Form Styles (matching Settings.vue) ===== */
.settings-section[data-v-0d4f8059] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* inside an expanded strategy card the body is already glass — let the
   inner section blend rather than stack a second heavy panel */
.card-body > div .settings-section[data-v-0d4f8059],
.card-body .settings-section[data-v-0d4f8059] {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.settings-section h2[data-v-0d4f8059] {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-note[data-v-0d4f8059] {
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
  color: var(--text-mute);
}
.section-description[data-v-0d4f8059] {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.multi-strategy-note[data-v-0d4f8059] {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #d4c87a;
  line-height: 1.5;
}
.multi-strategy-note strong[data-v-0d4f8059] {
  color: #ffc107;
}
.setting-row[data-v-0d4f8059] {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.setting-row.two-col[data-v-0d4f8059] {
  grid-template-columns: repeat(2, 1fr);
}
.setting-row.conditional[data-v-0d4f8059] {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(var(--accent-rgb), 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.setting-item label[data-v-0d4f8059] {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.setting-item small[data-v-0d4f8059] {
  display: block;
  margin-top: 0.375rem;
  color: var(--text-mute);
  font-size: 0.8rem;
}
.required-mark[data-v-0d4f8059] {
  color: var(--loss);
  margin-left: 0.15rem;
}
.setting-item input[type="text"][data-v-0d4f8059],
.setting-item input[type="number"][data-v-0d4f8059],
.setting-item input[type="time"][data-v-0d4f8059],
.setting-item select[data-v-0d4f8059] {
  width: 100%;
  height: 42px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--bg);
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.setting-item input[data-v-0d4f8059]:focus,
.setting-item select[data-v-0d4f8059]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.setting-item select[data-v-0d4f8059] {
  cursor: pointer;
}

/*
 * Account identifiers render monospace on purpose. The failure this picker
 * exists to prevent is a customer reading `5WI17076` as `5W17076` — capital I
 * and digit 1 are near-identical in proportional UI fonts. A monospace face
 * disambiguates them, so the picker doesn't reintroduce the confusion it was
 * built to remove. Applies to the fallback input too, since that path is still
 * hand-typed.
 */
.setting-item select.account-select[data-v-0d4f8059],
.setting-item input.account-input[data-v-0d4f8059] {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.02em;
}
.setting-item select.account-select option[data-v-0d4f8059]:disabled {
  color: var(--text-muted, #888);
}

/* Mismatch callout sits under the Account Type buttons, aligned left with them
   rather than inheriting the centred banner treatment used inside modals. */
.account-mode-mismatch[data-v-0d4f8059] {
  margin-top: 0.75rem;
  align-items: flex-start;
}
.account-mode-mismatch strong[data-v-0d4f8059] {
  display: block;
  color: #ffc107;
  margin-bottom: 0.25rem;
}
.account-mode-mismatch span[data-v-0d4f8059] {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}
.input-with-prefix[data-v-0d4f8059],
.input-with-suffix[data-v-0d4f8059] {
  display: flex;
  align-items: stretch;
  height: 42px;
}
.input-with-prefix input[data-v-0d4f8059],
.input-with-suffix input[data-v-0d4f8059] {
  flex: 1;
  height: 100%;
}
.input-with-prefix .prefix[data-v-0d4f8059],
.input-with-suffix .suffix[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--border);
  color: var(--text-mute);
  font-size: 0.9rem;
  height: 100%;
}
.input-with-prefix .prefix[data-v-0d4f8059] {
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: 6px 0 0 6px;
}
.input-with-prefix input[data-v-0d4f8059] {
  border-radius: 0 6px 6px 0;
}
.input-with-suffix .suffix[data-v-0d4f8059] {
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 6px 6px 0;
}
.input-with-suffix input[data-v-0d4f8059] {
  border-radius: 6px 0 0 6px;
}

/* Segmented Control */
.segmented-control[data-v-0d4f8059] {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.segmented-control button[data-v-0d4f8059] {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.segmented-control button[data-v-0d4f8059]:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: #aaa;
}
.segmented-control button.active[data-v-0d4f8059] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 4px rgba(var(--accent-rgb), 0.3);
}

/* Toggle Switch */
.toggle-label[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.toggle-label[data-v-0d4f8059]:hover {
  border-color: var(--accent);
}
.toggle-text[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.toggle-text strong[data-v-0d4f8059] {
  color: #fff;
  font-size: 0.95rem;
}
.toggle-text small[data-v-0d4f8059] {
  color: var(--text-mute);
  font-size: 0.8rem;
  margin: 0;
}

/* rd-toggle look: neutral track off, accent-gradient track on */
.toggle-switch[data-v-0d4f8059] {
  position: relative;
  width: 58px;
  height: 28px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.3s var(--ease-out);
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch[data-v-0d4f8059]::before {
  content: 'OFF';
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.toggle-switch[data-v-0d4f8059]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.toggle-switch.active[data-v-0d4f8059] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}
.toggle-switch.active[data-v-0d4f8059]::before {
  content: 'ON';
  left: 10px;
  color: var(--accent-ink);
}
.toggle-switch.active[data-v-0d4f8059]::after {
  transform: translateX(30px);
  background: #fff;
}
.toggle-label.compact[data-v-0d4f8059] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border: none;
}
.toggle-label.compact[data-v-0d4f8059]:hover {
  border-color: transparent;
}
.toggle-label.compact .toggle-switch[data-v-0d4f8059] {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.toggle-label.compact .toggle-text[data-v-0d4f8059] {
  gap: 0.125rem;
}

/* Slider */
.slider-item label[data-v-0d4f8059] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-value[data-v-0d4f8059] {
  font-weight: 600;
  font-size: 1rem;
}
.slider-value.positive[data-v-0d4f8059] {
  color: var(--profit);
}
.slider-value.negative[data-v-0d4f8059] {
  color: var(--loss);
}
.slider[data-v-0d4f8059] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--border-strong);
  border-radius: 4px;
  outline: none;
  margin: 0.75rem 0 0.5rem 0;
  cursor: pointer;
}
.slider[data-v-0d4f8059]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.slider[data-v-0d4f8059]::-webkit-slider-thumb:hover {
  background: #5258d4;
  transform: scale(1.1);
}
.slider[data-v-0d4f8059]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.slider-labels[data-v-0d4f8059] {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-mute);
}

/* Trailing mode */
.trailing-options[data-v-0d4f8059] {
  margin-top: 1rem;
}
.trailing-mode-selector[data-v-0d4f8059] {
  display: inline-flex;
  gap: 0;
  margin-top: 0.5rem;
}
.trailing-mode-selector button[data-v-0d4f8059] {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-strong);
  background: var(--border);
  color: var(--text-mute);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.trailing-mode-selector button[data-v-0d4f8059]:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.trailing-mode-selector button[data-v-0d4f8059]:last-child {
  border-radius: 0 6px 6px 0;
}
.trailing-mode-selector button.active[data-v-0d4f8059] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.trailing-mode-selector button[data-v-0d4f8059]:hover:not(.active) {
  background: var(--border-strong);
  color: var(--text-dim);
}
.trailing-mode-hint[data-v-0d4f8059] {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-mute);
  font-size: 0.8rem;
}

/* Break-even mode */
.be-mode-selector[data-v-0d4f8059] {
  display: flex;
  gap: 0;
  margin-top: 0.5rem;
}
.be-mode-selector button[data-v-0d4f8059] {
  flex: 1;
  padding: 0.75rem 1rem;
  height: 42px;
  border: 1px solid var(--border-strong);
  background: var(--border);
  color: var(--text-mute);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.be-mode-selector button[data-v-0d4f8059]:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.be-mode-selector button[data-v-0d4f8059]:last-child {
  border-radius: 0 6px 6px 0;
}
.be-mode-selector button.active[data-v-0d4f8059] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.be-mode-selector button[data-v-0d4f8059]:hover:not(.active) {
  background: var(--border-strong);
  color: var(--text-dim);
}

/* Tier styles */
.tier-config-section[data-v-0d4f8059] {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
}

/* ===== Exit Legs (Multi-leg OCO) ===== */
.exit-legs-section[data-v-0d4f8059] {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(64, 200, 145, 0.04);
  border: 1px solid rgba(64, 200, 145, 0.2);
  border-radius: 10px;
}
.exit-legs-header[data-v-0d4f8059] {
  margin-bottom: 1rem;
}
.exit-legs-header h3[data-v-0d4f8059] {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.exit-legs-header .leg-count[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: var(--text-mute);
  background: var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: normal;
}
.exit-legs-header .section-note[data-v-0d4f8059] {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-mute);
  line-height: 1.45;
}
.exit-legs-info[data-v-0d4f8059] {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(64, 200, 145, 0.06);
  border-left: 3px solid #40c891;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.exit-legs-info-row[data-v-0d4f8059] {
  display: flex;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: #bbb;
  line-height: 1.5;
}
.exit-legs-info-row strong[data-v-0d4f8059] {
  color: #fff;
  font-weight: 600;
}
.exit-legs-info-row em[data-v-0d4f8059] {
  color: #40c891;
  font-style: normal;
  font-weight: 600;
}
.exit-legs-info-icon[data-v-0d4f8059] {
  flex-shrink: 0;
  color: #40c891;
  font-size: 0.95rem;
  line-height: 1.5;
}
.exit-leg-row[data-v-0d4f8059] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.exit-leg-index[data-v-0d4f8059] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #40c891;
  color: var(--bg);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.exit-leg-sliders[data-v-0d4f8059] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.exit-leg-slider label[data-v-0d4f8059] {
  display: block;
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-bottom: 0.25rem;
}
.exit-leg-slider .slider[data-v-0d4f8059] {
  width: 100%;
}
.exit-leg-remove[data-v-0d4f8059] {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1;
  align-self: center;
  transition: color 120ms ease;
}
.exit-leg-remove[data-v-0d4f8059]:hover {
  color: #ff6b6b;
}
.exit-legs-footer[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 1rem;
}
.add-leg-btn[data-v-0d4f8059] {
  background: rgba(64, 200, 145, 0.1);
  border: 1px solid rgba(64, 200, 145, 0.3);
  color: #40c891;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}
.add-leg-btn[data-v-0d4f8059]:hover:not(:disabled) {
  background: rgba(64, 200, 145, 0.2);
}
.add-leg-btn[data-v-0d4f8059]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.alloc-total[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: var(--text-mute);
}
.alloc-total.invalid[data-v-0d4f8059] {
  color: #ff6b6b;
  font-weight: 500;
}

/* Click-to-edit value for exit-leg sliders. The button shows the current
   percent and matches the existing .slider-value text style; tapping it
   swaps in a numeric input so mobile users can type an exact value. */
.slider-value-btn[data-v-0d4f8059] {
  background: transparent;
  border: 1px dashed transparent;
  padding: 0 0.3rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1.2;
  transition: background 120ms ease, border-color 120ms ease;
}
.slider-value-btn.positive[data-v-0d4f8059] { color: var(--profit);
}
.slider-value-btn.negative[data-v-0d4f8059] { color: var(--loss);
}
.slider-value-btn[data-v-0d4f8059]:hover,
.slider-value-btn[data-v-0d4f8059]:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}
.leg-value-input-wrap[data-v-0d4f8059] {
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  font-size: 1rem;
  gap: 1px;
}
.leg-value-input-wrap.positive[data-v-0d4f8059] { color: var(--profit);
}
.leg-value-input-wrap.negative[data-v-0d4f8059] { color: var(--loss);
}
.leg-value-input[data-v-0d4f8059] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(64, 200, 145, 0.5);
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  width: 4.5ch;
  padding: 0 0.25rem;
  text-align: center;
  border-radius: 4px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.leg-value-input.positive[data-v-0d4f8059] { color: var(--profit);
}
.leg-value-input.negative[data-v-0d4f8059] { color: var(--loss);
}
.leg-value-input[data-v-0d4f8059]::-webkit-outer-spin-button,
.leg-value-input[data-v-0d4f8059]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.leg-value-input[data-v-0d4f8059]:focus {
  outline: none;
  border-color: #40c891;
  background: rgba(64, 200, 145, 0.12);
}
.tier-config-header[data-v-0d4f8059] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.tier-config-header h3[data-v-0d4f8059] {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}
.tier-count[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: var(--text-mute);
  background: var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}
.tier-info-box[data-v-0d4f8059] {
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 1rem;
}
.tier-info-box p[data-v-0d4f8059] {
  margin: 0;
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
}
.tier-list[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tier-row[data-v-0d4f8059] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.tier-number[data-v-0d4f8059] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.tier-field[data-v-0d4f8059] {
  flex: 1;
  min-width: 0;
}
.tier-field label[data-v-0d4f8059] {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mute);
  margin-bottom: 0.375rem;
}
.tier-input-group[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tier-slider[data-v-0d4f8059] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border-strong);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.tier-slider[data-v-0d4f8059]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.tier-slider[data-v-0d4f8059]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.tier-slider[data-v-0d4f8059]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.tier-value[data-v-0d4f8059] {
  min-width: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
}
.tier-value.positive[data-v-0d4f8059] { color: var(--profit);
}
.tier-value.negative[data-v-0d4f8059] { color: var(--loss);
}
.tier-arrow[data-v-0d4f8059] {
  color: var(--text-mute);
  font-size: 1.25rem;
  padding-top: 1.25rem;
  flex-shrink: 0;
}
.tier-remove-btn[data-v-0d4f8059] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  font-size: 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.25rem;
  flex-shrink: 0;
  padding: 0;
}
.tier-remove-btn[data-v-0d4f8059]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.15);
  border-color: var(--loss);
  color: var(--loss);
}
.tier-remove-btn[data-v-0d4f8059]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tier-actions[data-v-0d4f8059] {
  margin-top: 1rem;
}
.btn-add-tier[data-v-0d4f8059] {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-tier[data-v-0d4f8059]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
}
.btn-add-tier[data-v-0d4f8059]:disabled {
  border-color: var(--border-strong);
  color: var(--text-mute);
  cursor: not-allowed;
}
.tier-preview[data-v-0d4f8059] {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.tier-preview h4[data-v-0d4f8059] {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-mute);
  font-weight: 500;
}
.tier-preview-list[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier-preview-item[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.preview-trigger[data-v-0d4f8059] { color: var(--profit);
}
.preview-arrow[data-v-0d4f8059]   { color: var(--text-mute);
}
.preview-trail[data-v-0d4f8059]   { color: var(--loss);
}

/* Action Buttons */
/* rd-tb-solid look: accent gradient + glow */
.btn-primary[data-v-0d4f8059] {
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  transition: all 0.16s var(--ease-out);
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--glow);
}
.btn-primary[data-v-0d4f8059]:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn-primary[data-v-0d4f8059]:disabled {
  background: var(--border-strong);
  color: var(--text-mute);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}
.btn-secondary[data-v-0d4f8059] {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: var(--border-strong);
  color: var(--text-dim);
}
.btn-secondary[data-v-0d4f8059]:hover:not(:disabled) {
  background: #4d4d6c;
}
.btn-tertiary[data-v-0d4f8059] {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--loss);
  border: 1px solid var(--loss);
}
.btn-tertiary[data-v-0d4f8059]:hover:not(:disabled) {
  background: rgba(var(--loss-rgb), 0.1);
}
.btn-tertiary[data-v-0d4f8059]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Alerts-Exit informational banner (Trailing tab) */
.alerts-exit-banner[data-v-0d4f8059] {
  padding: 1rem 1.25rem;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  color: #cbd5e1;
}
.alerts-exit-banner strong[data-v-0d4f8059] {
  display: block;
  color: #3b82f6;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.alerts-exit-banner p[data-v-0d4f8059] {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Warning Banner */
.warning-banner[data-v-0d4f8059] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
}
.warning-icon[data-v-0d4f8059] {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.warning-banner strong[data-v-0d4f8059] {
  color: var(--loss);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.5rem;
}
.warning-content[data-v-0d4f8059] {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
}
.warning-content p[data-v-0d4f8059] {
  margin: 0 0 0.5rem 0;
}
.warning-content p[data-v-0d4f8059]:last-child {
  margin-bottom: 0;
}

/* ===== Schedule Editor ===== */
.schedule-presets[data-v-0d4f8059] {
  margin-bottom: 1.5rem;
}
.schedule-presets label[data-v-0d4f8059] {
  display: block;
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-bottom: 0.5rem;
}
.preset-buttons[data-v-0d4f8059] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.preset-btn[data-v-0d4f8059] {
  padding: 0.4rem 0.75rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.preset-btn[data-v-0d4f8059]:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
}

/* Featured Quick Start cards (Welcome Wizard flows) */
.featured-quickstart[data-v-0d4f8059] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.preset-btn.featured[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
  width: 100%;
}
.preset-btn.featured .preset-icon[data-v-0d4f8059] {
  font-size: 1.15rem;
  line-height: 1;
}
.preset-btn.featured .preset-info[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.preset-btn.featured .preset-name[data-v-0d4f8059] {
  font-weight: 700;
  font-size: 0.85rem;
}
.preset-btn.featured .preset-desc[data-v-0d4f8059] {
  font-size: 0.72rem;
  color: var(--text-mute);
}
.preset-btn.featured[data-v-0d4f8059]:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 560px) {
.featured-quickstart[data-v-0d4f8059] { grid-template-columns: 1fr;
}
}
.schedule-editor[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.schedule-day[data-v-0d4f8059] {
  background: rgba(45, 45, 68, 0.3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: all 0.2s;
}
.schedule-day[data-v-0d4f8059]:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
}
.schedule-day.day-disabled[data-v-0d4f8059] {
  opacity: 0.6;
}
.day-header[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.day-toggle[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.day-toggle input[type="checkbox"][data-v-0d4f8059] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.day-name[data-v-0d4f8059] {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
  min-width: 100px;
}
.day-blocks[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-left: 1.5rem;
}
.time-block[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.time-block input[type="time"][data-v-0d4f8059] {
  padding: 0.4rem 0.5rem;
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  width: 140px;
  cursor: text;
}
.time-block input[type="time"][data-v-0d4f8059]:focus {
  outline: none;
  border-color: var(--accent);
}
.time-separator[data-v-0d4f8059] {
  color: var(--text-mute);
  font-size: 0.85rem;
}
.remove-block-btn[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 4px;
  color: var(--loss);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}
.remove-block-btn[data-v-0d4f8059]:hover {
  background: rgba(var(--loss-rgb), 0.2);
  border-color: var(--loss);
}
.add-block-btn[data-v-0d4f8059] {
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  width: fit-content;
}
.add-block-btn[data-v-0d4f8059]:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-style: solid;
}
.day-disabled-text[data-v-0d4f8059] {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
  color: var(--text-mute);
  font-size: 0.85rem;
  font-style: italic;
}

/* ===== Market Event Skip Days ===== */
.skip-days-summary[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(45, 45, 68, 0.3);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.skip-count[data-v-0d4f8059] {
  font-size: 0.9rem;
  color: var(--text-mute);
  font-weight: 500;
}
.skip-count.active[data-v-0d4f8059] {
  color: var(--accent);
  font-weight: 600;
}
.skip-controls[data-v-0d4f8059] {
  display: flex;
  align-items: center;
}
.show-past-toggle[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-mute);
}
.show-past-toggle input[type="checkbox"][data-v-0d4f8059] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.skip-category-bar[data-v-0d4f8059] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.category-chip[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: rgba(45, 45, 68, 0.3);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.category-chip[data-v-0d4f8059]:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #fff;
}
.category-chip.fully-selected[data-v-0d4f8059] {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
  color: #fff;
}
.category-chip.partially-selected[data-v-0d4f8059] {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #ddd;
}
.chip-icon[data-v-0d4f8059] {
  font-size: 0.9rem;
}
.skip-filter-tabs[data-v-0d4f8059] {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.skip-filter-tabs button[data-v-0d4f8059] {
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-mute);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.skip-filter-tabs button[data-v-0d4f8059]:hover {
  color: #fff;
  background: rgba(45, 45, 68, 0.5);
}
.skip-filter-tabs button.active[data-v-0d4f8059] {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.2);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.skip-select-all[data-v-0d4f8059] {
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-strong);
}
.skip-select-all .day-toggle[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: var(--text-mute);
}
.skip-select-all input[type="checkbox"][data-v-0d4f8059] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.skip-events-list[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skip-month-group[data-v-0d4f8059] {
  background: rgba(45, 45, 68, 0.15);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.month-header[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(45, 45, 68, 0.4);
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 7px;
}
.skip-month-group.expanded .month-header[data-v-0d4f8059] {
  border-radius: 7px 7px 0 0;
}
.month-header[data-v-0d4f8059]:hover {
  background: rgba(45, 45, 68, 0.6);
}
.month-header-left[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.accordion-arrow[data-v-0d4f8059] {
  font-size: 0.65rem;
  transition: transform 0.2s;
  color: var(--text-mute);
}
.accordion-arrow.expanded[data-v-0d4f8059] {
  transform: rotate(90deg);
}
.month-header-right[data-v-0d4f8059] {
  display: flex;
  align-items: center;
}
.month-selected-badge[data-v-0d4f8059] {
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-radius: 10px;
  font-weight: 600;
}
.month-event-count[data-v-0d4f8059] {
  font-size: 0.75rem;
  color: var(--text-mute);
  font-weight: 400;
}
.month-events[data-v-0d4f8059] {
  display: flex;
  flex-direction: column;
}
.skip-event-row[data-v-0d4f8059] {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(61, 61, 92, 0.4);
  transition: background 0.15s;
}
.skip-event-row[data-v-0d4f8059]:last-child {
  border-bottom: none;
  border-radius: 0 0 7px 7px;
}
.skip-event-row[data-v-0d4f8059]:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
.skip-event-row.is-selected[data-v-0d4f8059] {
  background: rgba(var(--accent-rgb), 0.1);
}
.skip-event-row.is-past[data-v-0d4f8059] {
  opacity: 0.5;
}
.skip-event-row.is-today[data-v-0d4f8059] {
  border-left: 3px solid var(--accent);
}
.event-toggle[data-v-0d4f8059] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  width: 100%;
}
.event-toggle input[type="checkbox"][data-v-0d4f8059] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.event-date[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: #aaa;
  min-width: 120px;
  font-family: monospace;
}
.event-category-badge[data-v-0d4f8059] {
  font-size: 0.85rem;
  flex-shrink: 0;
  position: relative;
  cursor: help;
}
.event-tooltip[data-v-0d4f8059] {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  white-space: normal;
  width: 220px;
  line-height: 1.4;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.event-tooltip[data-v-0d4f8059]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--border-strong);
}
.event-category-badge:hover .event-tooltip[data-v-0d4f8059] {
  display: block;
}
.event-name[data-v-0d4f8059] {
  font-size: 0.85rem;
  color: #ddd;
  flex: 1;
}
.today-badge[data-v-0d4f8059] {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.skip-empty-state[data-v-0d4f8059] {
  padding: 2rem;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.9rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
.strategies-header[data-v-0d4f8059] {
    flex-direction: column;
    align-items: flex-start;
}
.btn-new-strategy[data-v-0d4f8059] {
    width: 100%;
    text-align: center;
}
.setting-row.two-col[data-v-0d4f8059] {
    grid-template-columns: 1fr;
}
.card-header-left[data-v-0d4f8059] {
    gap: 0.5rem;
}
.card-body[data-v-0d4f8059] {
    padding: 1rem;
}
.modal-footer[data-v-0d4f8059] {
    flex-direction: column-reverse;
}
.modal-footer button[data-v-0d4f8059] {
    width: 100%;
}
.card-actions[data-v-0d4f8059] {
    flex-direction: column;
    align-items: stretch;
}
.card-actions-left[data-v-0d4f8059] {
    flex-direction: column;
}
.card-actions button[data-v-0d4f8059],
  .card-actions-left button[data-v-0d4f8059] {
    width: 100%;
    text-align: center;
}
.tier-row[data-v-0d4f8059] {
    flex-wrap: wrap;
}
.tier-arrow[data-v-0d4f8059] {
    display: none;
}
.tier-field[data-v-0d4f8059] {
    flex: 1 1 100%;
}
.time-block[data-v-0d4f8059] {
    flex-wrap: wrap;
}
.time-block input[type="time"][data-v-0d4f8059] {
    flex: 1;
    min-width: 130px;
}
.day-name[data-v-0d4f8059] {
    min-width: auto;
}
.event-date[data-v-0d4f8059] {
    min-width: 90px;
    font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.skip-category-bar[data-v-0d4f8059] {
    gap: 0.35rem;
}
.category-chip[data-v-0d4f8059] {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}
}

.settings-container[data-v-5b2b8579] {
  max-width: 1100px;
  margin: 0 auto;
}

/* Appearance — theme picker */
.theme-picker[data-v-5b2b8579] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.theme-opt[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
  text-align: left;
  font-family: var(--sans);
}
.theme-opt[data-v-5b2b8579]:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.theme-opt.on[data-v-5b2b8579] {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3), var(--glow);
}
.theme-opt-swatch[data-v-5b2b8579] {
  width: 100%;
  height: 42px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  display: grid;
  place-items: center;
}
.theme-opt-check[data-v-5b2b8579] {
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.theme-opt-name[data-v-5b2b8579] {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.theme-opt-blurb[data-v-5b2b8579] {
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.4;
}
.appearance-toggles[data-v-5b2b8579] {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.settings-header[data-v-5b2b8579] {
  margin-bottom: 1.5rem;
}
.settings-header .header-content[data-v-5b2b8579] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.settings-header .header-text[data-v-5b2b8579] {
  flex: 1;
}
.settings-header .rd-page-title[data-v-5b2b8579] {
  margin: 0;
}
.settings-header .subtitle[data-v-5b2b8579] {
  margin: 0;
}
.message[data-v-5b2b8579] {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  font-weight: 500;
}
.message.success[data-v-5b2b8579] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.message.error[data-v-5b2b8579] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
}
.settings-section[data-v-5b2b8579] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s var(--ease-out);
}
.settings-section[data-v-5b2b8579]:hover {
  border-color: var(--border-strong);
}
.settings-section h2[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 0.5rem 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.settings-section h2[data-v-5b2b8579]::before {
  content: '';
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: var(--glow);
  flex: none;
}
.section-note[data-v-5b2b8579] {
  margin: 0 0 1.5rem 0;
  font-size: 0.875rem;
  color: var(--text-mute);
  font-family: var(--mono);
}
.setting-row[data-v-5b2b8579] {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.setting-item label[data-v-5b2b8579] {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Replay welcome tour: button + description on one aligned line, wrapping the
   description under the button on narrow screens (mirrors the muted-text
   pattern used by .status-info / .danger-info). */
.welcome-tour-row .setting-item[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.replay-tour-btn[data-v-5b2b8579] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.welcome-tour-row .setting-item small[data-v-5b2b8579] {
  flex: 1 1 12rem;
  color: var(--text-mute);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Toggle Switch Styling */
.toggle-label[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.toggle-label[data-v-5b2b8579]:hover {
  border-color: var(--accent);
}
.toggle-text[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.toggle-text strong[data-v-5b2b8579] {
  color: #fff;
  font-size: 0.95rem;
}
.toggle-text small[data-v-5b2b8579] {
  color: var(--text-mute);
  font-size: 0.8rem;
  margin: 0;
}
.toggle-switch[data-v-5b2b8579] {
  position: relative;
  width: 58px;
  height: 28px;
  background: rgba(var(--loss-rgb), 0.3);
  border: 1px solid rgba(var(--loss-rgb), 0.5);
  border-radius: 14px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch[data-v-5b2b8579]::before {
  content: 'OFF';
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--loss);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.toggle-switch[data-v-5b2b8579]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--loss);
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s ease;
}
.toggle-switch.active[data-v-5b2b8579] {
  background: rgba(var(--profit-rgb), 0.3);
  border-color: rgba(var(--profit-rgb), 0.5);
}
.toggle-switch.active[data-v-5b2b8579]::before {
  content: 'ON';
  left: 10px;
  color: var(--profit);
}
.toggle-switch.active[data-v-5b2b8579]::after {
  transform: translateX(30px);
  background: var(--profit);
}

/* Compact toggle style */
.toggle-label.compact[data-v-5b2b8579] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border: none;
}
.toggle-label.compact[data-v-5b2b8579]:hover {
  border-color: transparent;
}
.toggle-label.compact .toggle-switch[data-v-5b2b8579] {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.toggle-label.compact .toggle-text[data-v-5b2b8579] {
  gap: 0.125rem;
}
.toggle-label.compact .toggle-text strong[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Toggle item container */
.toggle-item[data-v-5b2b8579] {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.notification-settings[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Per-event sound picker (dropdown + preview), aligned under the toggle text */
.sound-picker[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-left: calc(58px + 0.75rem);
}
.sound-select[data-v-5b2b8579] {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}
.sound-picker .btn-small[data-v-5b2b8579] {
  flex: none;
}
@media (max-width: 480px) {
.sound-picker[data-v-5b2b8579] {
    padding-left: 0;
}
}
.permission-warning[data-v-5b2b8579] {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #f59e0b;
}
.error-text[data-v-5b2b8579] {
  color: var(--loss);
  font-size: 0.875rem;
  margin: 0.75rem 0 0 0;
}
.btn-secondary[data-v-5b2b8579] {
  background: var(--border-strong);
  color: var(--text-dim);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.btn-secondary[data-v-5b2b8579]:hover {
  background: #4d4d6c;
}
.btn-small[data-v-5b2b8579] {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* Auto Update Section */
.auto-update-section[data-v-5b2b8579] {
  border-color: rgba(var(--profit-rgb), 0.3);
  background: rgba(var(--profit-rgb), 0.05);
}
.auto-update-section h2[data-v-5b2b8579] {
  color: var(--profit);
}
.auto-update-section h2[data-v-5b2b8579]::before {
  background: var(--profit);
  box-shadow: 0 0 12px rgba(var(--profit-rgb), 0.4);
}
.registered-status[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-radius: 8px;
  margin-top: 1rem;
}
.status-icon[data-v-5b2b8579] {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--profit);
  color: #fff;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: bold;
  flex-shrink: 0;
}
.status-info[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.status-info strong[data-v-5b2b8579] {
  color: var(--profit);
  font-size: 1rem;
}
.status-info small[data-v-5b2b8579] {
  color: var(--text-mute);
  font-size: 0.85rem;
}

/* Danger Zone */
.danger-zone[data-v-5b2b8579] {
  margin-top: 3rem;
  border-color: rgba(var(--loss-rgb), 0.3);
  background: rgba(var(--loss-rgb), 0.05);
}
.danger-zone h2[data-v-5b2b8579] {
  color: var(--loss);
}
.danger-zone h2[data-v-5b2b8579]::before {
  background: var(--loss);
  box-shadow: 0 0 12px rgba(var(--loss-rgb), 0.4);
}
.danger-item[data-v-5b2b8579] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  margin-top: 1rem;
}
.danger-info[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.danger-info strong[data-v-5b2b8579] {
  color: #fff;
}
.danger-info small[data-v-5b2b8579] {
  color: var(--text-mute);
  font-size: 0.8rem;
}
.btn-danger[data-v-5b2b8579] {
  background: var(--loss);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger[data-v-5b2b8579]:hover:not(:disabled) {
  background: #c0392b;
}
.btn-danger[data-v-5b2b8579]:disabled {
  background: #5a2d2d;
  color: var(--text-mute);
  cursor: not-allowed;
}

/* Modal */
.modal-overlay[data-v-5b2b8579] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal[data-v-5b2b8579] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header[data-v-5b2b8579] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h3[data-v-5b2b8579] {
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
}
.modal-close[data-v-5b2b8579] {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-mute);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close[data-v-5b2b8579]:hover {
  color: #fff;
}
.modal-body[data-v-5b2b8579] {
  padding: 1.5rem;
}
.modal-description[data-v-5b2b8579] {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}
.warning-banner[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(var(--loss-rgb), 0.15);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.warning-icon[data-v-5b2b8579] {
  font-size: 1.5rem;
}
.warning-banner strong[data-v-5b2b8579] {
  color: var(--loss);
  font-size: 1rem;
}
.warning-content[data-v-5b2b8579] {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}
.warning-content p[data-v-5b2b8579] {
  margin: 0 0 0.75rem 0;
}
.warning-content ul[data-v-5b2b8579] {
  margin: 0 0 1.25rem 0;
  padding-left: 1.5rem;
}
.warning-content li[data-v-5b2b8579] {
  margin-bottom: 0.5rem;
}
.risk-section[data-v-5b2b8579],
.info-section[data-v-5b2b8579] {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.risk-section[data-v-5b2b8579] {
  background: rgba(var(--loss-rgb), 0.1);
  border-left: 3px solid var(--loss);
}
.risk-section h4[data-v-5b2b8579] {
  margin: 0 0 0.5rem 0;
  color: var(--loss);
  font-size: 0.95rem;
}
.info-section[data-v-5b2b8579] {
  background: rgba(var(--accent-rgb), 0.1);
  border-left: 3px solid var(--accent);
}
.info-section h4[data-v-5b2b8579] {
  margin: 0 0 0.5rem 0;
  color: var(--accent);
  font-size: 0.95rem;
}
.info-section .highlight[data-v-5b2b8579] {
  background: rgba(243, 156, 18, 0.15);
  padding: 0.75rem;
  border-radius: 6px;
  margin-top: 0.75rem;
  color: #f39c12;
}
.confirm-section[data-v-5b2b8579] {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.confirm-checkbox[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--text-dim);
}
.confirm-checkbox input[type="checkbox"][data-v-5b2b8579] {
  width: 18px;
  height: 18px;
  accent-color: var(--loss);
  cursor: pointer;
}
.modal-footer[data-v-5b2b8579] {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* PIN Setup/Remove Modal */
.pin-reconfigure-notice[data-v-5b2b8579] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  margin-top: 0.5rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
}
.pin-notice-text[data-v-5b2b8579] {
  font-size: 0.85rem;
  color: #f59e0b;
  flex: 1;
}
.btn-pin-setup[data-v-5b2b8579] {
  padding: 0.375rem 0.75rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-pin-setup[data-v-5b2b8579]:hover {
  background: rgba(245, 158, 11, 0.25);
}
.pin-setup-form[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-input-group[data-v-5b2b8579] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.modal-input-label[data-v-5b2b8579] {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
}
.modal-input[data-v-5b2b8579] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.modal-input[data-v-5b2b8579]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.modal-input[data-v-5b2b8579]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modal-input[data-v-5b2b8579]::placeholder {
  color: var(--text-mute);
}
.pin-modal-input[data-v-5b2b8579] {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.4rem;
  font-weight: 600;
}
.modal-error[data-v-5b2b8579] {
  color: var(--loss);
  font-size: 0.85rem;
  background: rgba(var(--loss-rgb), 0.1);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.modal-actions[data-v-5b2b8579] {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.modal-actions button[data-v-5b2b8579] {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s, opacity 0.2s;
}
.modal-actions button[data-v-5b2b8579]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.modal-actions .btn-primary[data-v-5b2b8579] {
  background: var(--accent);
  color: #fff;
}
.modal-actions .btn-primary[data-v-5b2b8579]:hover:not(:disabled) {
  background: #5558e3;
}
.modal-actions .btn-secondary[data-v-5b2b8579] {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.modal-actions .btn-secondary[data-v-5b2b8579]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.modal-actions .btn-danger[data-v-5b2b8579] {
  background: var(--loss);
  color: #fff;
}
.modal-actions .btn-danger[data-v-5b2b8579]:hover:not(:disabled) {
  background: #c0392b;
}
.btn-primary[data-v-5b2b8579] {
  background: var(--accent);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.btn-primary[data-v-5b2b8579]:hover:not(:disabled) {
  background: #5258d4;
}
.btn-primary[data-v-5b2b8579]:disabled {
  background: var(--border-strong);
  color: var(--text-mute);
  cursor: not-allowed;
}
@media (max-width: 768px) {
.settings-container[data-v-5b2b8579] {
    padding: 0 0.5rem;
    overflow-x: hidden;
}
.settings-section[data-v-5b2b8579] {
    padding: 1rem;
}
.danger-item[data-v-5b2b8579] {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}
.danger-item .btn-danger[data-v-5b2b8579] {
    width: 100%;
}
.modal-footer[data-v-5b2b8579] {
    flex-direction: column-reverse;
}
.modal-footer button[data-v-5b2b8579] {
    width: 100%;
}
}

/* Futures P&L unit selector (Dollars / Points / Ticks) */
.unit-toggle-label[data-v-5b2b8579] {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.unit-selector[data-v-5b2b8579] {
  display: flex;
  height: 40px;
  max-width: 360px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.unit-selector button[data-v-5b2b8579] {
  flex: 1;
  border: none;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.unit-selector button + button[data-v-5b2b8579] {
  border-left: 1px solid var(--border-strong);
}
.unit-selector button.active[data-v-5b2b8579] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-weight: 600;
}
.unit-toggle-hint[data-v-5b2b8579] {
  display: block;
  margin-top: 0.375rem;
  color: var(--text-mute);
  font-size: 0.8rem;
}

.billing-page[data-v-b181c0c1] {
  padding: 1.5rem 2rem;
}

/* Loading / Error */
.loading-state[data-v-b181c0c1],
.error-state[data-v-b181c0c1] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  color: var(--text-mute);
}
.spinner[data-v-b181c0c1] {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-b181c0c1 0.8s linear infinite;
}
@keyframes spin-b181c0c1 {
to { transform: rotate(360deg);
}
}

/* ---------- two-column layout: current plan + invoices ---------- */
.billing-layout[data-v-b181c0c1] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}

/* status pills (bare classes returned by statusClass / mktStatusClass) */
.rd-pill.active[data-v-b181c0c1] {
  background: rgba(var(--profit-rgb), 0.14);
  color: var(--profit);
}
.rd-pill.cancelled[data-v-b181c0c1] {
  background: rgba(var(--loss-rgb), 0.14);
  color: var(--loss);
}
.rd-pill.suspended[data-v-b181c0c1] {
  background: rgba(var(--paper-rgb), 0.14);
  color: var(--paper);
}

/* ---------- plan hero ---------- */
.plan-hero[data-v-b181c0c1] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 4px;
}
.plan-name[data-v-b181c0c1] {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.plan-price[data-v-b181c0c1] {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.plan-price .rd-mono[data-v-b181c0c1] {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan-price .rd-dim[data-v-b181c0c1] {
  font-size: 0.85rem;
}
.plan-renew[data-v-b181c0c1] {
  font-family: var(--mono);
  font-size: 0.75rem;
  margin-top: 0.45rem;
}
.plan-hero-badges[data-v-b181c0c1] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.pending-downgrade-notice[data-v-b181c0c1] {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding: 0.75rem;
  background: rgba(var(--paper-rgb), 0.1);
  border: 1px solid rgba(var(--paper-rgb), 0.3);
  border-radius: var(--radius-md);
}
.pending-downgrade-notice .pending-icon[data-v-b181c0c1] {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.pending-downgrade-notice strong[data-v-b181c0c1] {
  color: var(--paper);
  font-size: 0.85rem;
}
.pending-downgrade-notice p[data-v-b181c0c1] {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.no-subscription .rd-empty[data-v-b181c0c1] {
  margin: 0;
}

/* invoices table fills panel edge-to-edge */
.invoices-panel .rd-rt-wrap[data-v-b181c0c1] {
  padding-bottom: 6px;
}

/* ---------- Plans section ---------- */
.plans-section[data-v-b181c0c1] {
  margin-bottom: 1.5rem;
}
.plans-header[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mkt-section-title[data-v-b181c0c1] {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1rem 0;
}
.plans-header .mkt-section-title[data-v-b181c0c1] {
  margin: 0;
}
.billing-toggle .save-badge[data-v-b181c0c1] {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  margin-left: 0.35rem;
  background: rgba(var(--profit-rgb), 0.2);
  color: var(--profit);
  border-radius: 4px;
}
.billing-toggle .rd-seg-btn.on .save-badge[data-v-b181c0c1] {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent-ink);
}

/* ---------- plan comparison cards ---------- */
/* The four recurring tiers sit side-by-side for direct comparison; Lifetime is a
   one-time purchase, so it drops to its own full-width row beneath them. Below the
   wide breakpoint the four collapse to two columns, then a single-column stack on
   mobile. Top padding leaves room for the badges. */
.plan-compare[data-v-b181c0c1] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  padding-top: 0.7rem;
}
@media (max-width: 1180px) {
.plan-compare[data-v-b181c0c1] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.plan-card[data-v-b181c0c1] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.plan-card[data-v-b181c0c1]:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Paper — the entry/testing tier. Tinted with the app's paper-trading accent and
   fenced off with a divider so it reads apart from the three paid subscriptions. */
.plan-card.paper[data-v-b181c0c1] {
  border-color: rgba(var(--paper-rgb), 0.35);
  background: linear-gradient(165deg, rgba(var(--paper-rgb), 0.06), var(--panel) 62%);
}
.plan-card.paper .plan-card-badge[data-v-b181c0c1]:not(.current-badge) {
  background: var(--paper);
  box-shadow: none;
}
/* Thin divider in the gap to Starter's left, separating Paper from the paid plans.
   Paper always sits immediately left of Starter in the 4- and 2-column layouts;
   it's hidden once the grid collapses to a single column. */
.plan-card[data-tier="automation_starter"][data-v-b181c0c1]::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: -8px;
  width: 1px;
  background: var(--border-strong);
  pointer-events: none;
}

/* Highlighted tier (Most Popular) — the anchor of the grid. Suppressed for Lifetime
   members (see template): they can't switch, so the ring would just mislead. */
.plan-card.highlight[data-v-b181c0c1] {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.09), var(--panel) 60%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22);
}

/* One-time Lifetime tier — its own full-width row beneath the recurring plans,
   laid out as a horizontal banner so it doesn't stretch awkwardly. Premium
   secondary-accent treatment sets it apart from the monthly plans. */
.plan-card.lifetime[data-v-b181c0c1] {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.6rem;
  padding: 1.3rem 1.5rem;
  border-color: color-mix(in srgb, var(--accent-2) 50%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 9%, var(--panel)), var(--panel) 55%);
}
.plan-card.lifetime .plan-card-name[data-v-b181c0c1] { margin: 0; font-size: 1.15rem;
}
.plan-card.lifetime .plan-card-price[data-v-b181c0c1] { margin: 0;
}
.plan-card.lifetime .plan-lifetime-credit[data-v-b181c0c1] { margin: 0;
}
.plan-card.lifetime .plan-feats[data-v-b181c0c1] {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  gap: 1.75rem;
  margin: 0;
}
.plan-card.lifetime .plan-feats li[data-v-b181c0c1] { padding: 0;
}
.plan-card.lifetime .plan-current-indicator[data-v-b181c0c1],
.plan-card.lifetime .plan-included-indicator[data-v-b181c0c1],
.plan-card.lifetime .plan-card-btn[data-v-b181c0c1] {
  width: auto;
  margin-left: auto;
  padding: 0.4rem 1.1rem;
}

/* Current plan — green accent wins over highlight/lifetime treatments. */
.plan-card.current[data-v-b181c0c1] {
  border-color: rgba(var(--profit-rgb), 0.55);
  background: linear-gradient(160deg, rgba(var(--profit-rgb), 0.07), var(--panel) 55%);
  box-shadow: none;
}
.plan-card-badge[data-v-b181c0c1] {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--glow);
}
.plan-card-badge.current-badge[data-v-b181c0c1] {
  background: var(--profit);
  color: var(--accent-ink);
  left: 1rem;
  right: auto;
  box-shadow: none;
}

/* Lifetime's badge uses the solid secondary accent to match its card treatment
   and distinguish it from the "Most Popular" gradient badge. */
.plan-card.lifetime .plan-card-badge[data-v-b181c0c1]:not(.current-badge) {
  background: var(--accent-2);
  box-shadow: none;
}
.plan-card-name[data-v-b181c0c1] {
  font-family: var(--display);
  margin: 0.5rem 0 0.6rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.plan-card-price[data-v-b181c0c1] {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}
.plan-card-price .rd-mono[data-v-b181c0c1] {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan-card-price .rd-dim[data-v-b181c0c1] {
  font-size: 0.85rem;
}
.plan-annual[data-v-b181c0c1] {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.annual-savings[data-v-b181c0c1] {
  color: var(--profit);
  font-weight: 600;
}

/* Lifetime loyalty credit: struck full price + credit note on the card. */
.plan-lifetime-credit[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.5rem;
}
.plan-lifetime-credit .lifetime-was[data-v-b181c0c1] {
  color: var(--text-dim);
  text-decoration: line-through;
}
.plan-lifetime-credit .lifetime-off[data-v-b181c0c1] {
  color: var(--accent-2);
  font-weight: 700;
}

/* Loyalty-reward incentive banner — set apart with the secondary accent so it
   pops as the reason to upgrade to Lifetime. */
.lifetime-incentive[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 14%, var(--panel)), var(--panel) 70%);
}
.lifetime-incentive-badge[data-v-b181c0c1] {
  flex: none;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--accent-2);
  color: var(--accent-ink);
}
.lifetime-incentive-text[data-v-b181c0c1] {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
}
.lifetime-incentive-net[data-v-b181c0c1] {
  color: var(--accent-2);
}
.lifetime-incentive-was[data-v-b181c0c1] {
  color: var(--text-dim);
  text-decoration: line-through;
}
.plan-feats[data-v-b181c0c1] {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem 0;
  flex: 1;
}
.plan-feats li[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 0.3rem 0;
}
.plan-feats strong[data-v-b181c0c1] {
  color: var(--text);
}
.feat-check[data-v-b181c0c1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  font-weight: 700;
  font-size: 0.75rem;
  flex: none;
}
.plan-card-btn[data-v-b181c0c1] {
  width: 100%;
  justify-content: center;
}
.plan-current-indicator[data-v-b181c0c1] {
  width: 100%;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--profit);
}

/* Shown to Lifetime members on lower tiers — everything below Lifetime is already
   covered, so a muted "Included" reads clearer than an unusable switch button. */
.plan-included-indicator[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mute);
}

/* ---------- Marketplace subscriptions ---------- */
.marketplace-subs-section[data-v-b181c0c1] {
  margin-bottom: 2rem;
}
.mkt-sub-card[data-v-b181c0c1] {
  margin-bottom: 1rem;
}
.mkt-details[data-v-b181c0c1] {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.mkt-detail[data-v-b181c0c1] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mkt-detail-value[data-v-b181c0c1] {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.mkt-cancel-note[data-v-b181c0c1] {
  color: var(--paper);
  font-size: 0.85rem;
  margin: 0.75rem 0 0 0;
}
.mkt-sub-actions[data-v-b181c0c1] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.mkt-confirm-text[data-v-b181c0c1] {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-right: 0.25rem;
}
.mkt-cancel-btn[data-v-b181c0c1] {
  padding: 6px 11px;
  border-radius: 10px;
  border: 1px solid var(--loss);
  background: transparent;
  color: var(--loss);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mkt-cancel-btn[data-v-b181c0c1]:hover {
  background: rgba(var(--loss-rgb), 0.1);
}
.mkt-cancel-btn[data-v-b181c0c1]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mkt-error[data-v-b181c0c1] {
  color: var(--loss);
  font-size: 0.8rem;
  margin: 0.5rem 0 0 0;
}
.mkt-payments[data-v-b181c0c1] {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
@media (max-width: 980px) {
.billing-layout[data-v-b181c0c1] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.billing-page[data-v-b181c0c1] {
    padding: 1rem;
}
.mkt-details[data-v-b181c0c1] {
    gap: 1rem;
}
.plan-compare[data-v-b181c0c1] {
    grid-template-columns: 1fr;
    padding: 0.7rem 0 0;
}
  /* Single column: the vertical divider no longer makes sense, and the Lifetime
     banner stacks like the rest. */
.plan-card[data-tier="automation_starter"][data-v-b181c0c1]::before { display: none;
}
.plan-card.lifetime[data-v-b181c0c1] { flex-direction: column;
}
.plan-card.lifetime .plan-feats[data-v-b181c0c1] {
    flex-direction: column;
    justify-content: flex-start;
}
.plan-card.lifetime .plan-current-indicator[data-v-b181c0c1],
  .plan-card.lifetime .plan-included-indicator[data-v-b181c0c1],
  .plan-card.lifetime .plan-card-btn[data-v-b181c0c1] {
    width: 100%;
    margin-left: 0;
}
}

.trade-section[data-v-8e51e32a] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.section-head[data-v-8e51e32a] { margin-bottom: 1rem;
}
.section-head h2[data-v-8e51e32a] { margin: 0 0 0.25rem 0; color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem;
}
.section-head .section-desc[data-v-8e51e32a] { margin: 0; color: var(--text-mute); font-size: 0.85rem; line-height: 1.4;
}
.wheel-field[data-v-8e51e32a] { margin-top: 0.75rem;
}
.wheel-check[data-v-8e51e32a] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #fff; font-weight: 600;
}
.wheel-check input[data-v-8e51e32a] { width: 1rem; height: 1rem; cursor: pointer;
}
.field[data-v-8e51e32a] { margin-bottom: 1rem;
}
.field-row[data-v-8e51e32a] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.field label[data-v-8e51e32a] {
  display: block; color: #c0c0d0; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.4rem;
}
.required-mark[data-v-8e51e32a] { color: var(--loss);
}
.helper[data-v-8e51e32a] {
  display: block; color: var(--text-mute); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4;
}
.field-error[data-v-8e51e32a] {
  display: block; color: var(--loss); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4;
}
.field-error.block-error[data-v-8e51e32a] {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--loss-rgb), 0.08);
  border: 1px solid rgba(var(--loss-rgb), 0.3);
  border-radius: 6px;
}
.mono-input[data-v-8e51e32a] {
  width: 100%; padding: 0.6rem 0.8rem; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 1rem;
  font-family: 'SF Mono', 'Menlo', monospace; letter-spacing: 0.03em;
}
.mono-input[data-v-8e51e32a]:focus { outline: none; border-color: #5b8af5;
}
.date-input[data-v-8e51e32a] {
  width: 100%; padding: 0.6rem 0.8rem; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 0.95rem;
  color-scheme: dark;
}
.date-input[data-v-8e51e32a]:focus { outline: none; border-color: #5b8af5;
}
.segmented-control[data-v-8e51e32a] {
  display: inline-flex; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; padding: 0.25rem; gap: 0.25rem;
}
.segmented-control button[data-v-8e51e32a] {
  background: transparent; border: none; color: var(--text-dim);
  padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.segmented-control button.active[data-v-8e51e32a] { background: #5b8af5; color: #fff;
}
.segmented-control button[data-v-8e51e32a]:not(.active):hover { color: #fff;
}
.segmented-control.big button[data-v-8e51e32a] { padding: 0.55rem 1.2rem; font-size: 0.95rem;
}
.segmented-control button.call.active[data-v-8e51e32a] { background: var(--profit);
}
.segmented-control button.put.active[data-v-8e51e32a] { background: var(--loss);
}
.input-with-prefix[data-v-8e51e32a] {
  display: flex; align-items: stretch; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.input-with-prefix[data-v-8e51e32a]:focus-within { border-color: #5b8af5;
}
.input-with-prefix .prefix[data-v-8e51e32a] {
  display: flex; align-items: center; padding: 0 0.8rem; background: var(--border);
  color: var(--text-dim); font-size: 0.95rem;
}
.input-with-prefix input[data-v-8e51e32a] {
  flex: 1; background: transparent; border: none; padding: 0.6rem 0.8rem;
  color: #fff; font-size: 1rem;
}
.input-with-prefix input[data-v-8e51e32a]:focus { outline: none;
}
.preview-row[data-v-8e51e32a] {
  margin: 0.75rem 0 1rem; padding: 0.65rem 0.85rem;
  background: #16162b; border: 1px dashed var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.preview-label[data-v-8e51e32a] {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute);
}
.preview-value[data-v-8e51e32a] {
  color: #5b8af5; font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.95rem;
}
.preview-value.invalid[data-v-8e51e32a] { color: var(--loss);
}
.actions-row[data-v-8e51e32a] {
  margin-top: auto; padding-top: 0.75rem;
  display: flex; justify-content: flex-end;
}
.btn-primary[data-v-8e51e32a] {
  background: #5b8af5; color: #fff; border: none; padding: 0.65rem 1.4rem;
  border-radius: 8px; font-size: 0.93rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.btn-primary[data-v-8e51e32a]:hover:not(:disabled) { background: #4a78d8;
}
.btn-primary[data-v-8e51e32a]:disabled { background: #3a3a54; color: var(--text-mute); cursor: not-allowed;
}
.btn-submit[data-v-8e51e32a] {
  min-width: 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-spinner[data-v-8e51e32a] {
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff; border-radius: 50%; animation: spin-8e51e32a 0.8s linear infinite;
}
@keyframes spin-8e51e32a {
to { transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.field-row[data-v-8e51e32a] { grid-template-columns: 1fr;
}
}

.trade-section[data-v-fbaba1d5] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.section-head[data-v-fbaba1d5] { margin-bottom: 1rem;
}
.section-head h2[data-v-fbaba1d5] { margin: 0 0 0.25rem 0; color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem;
}
.section-head .section-desc[data-v-fbaba1d5] { margin: 0; color: var(--text-mute); font-size: 0.85rem; line-height: 1.4;
}
.field[data-v-fbaba1d5] { margin-bottom: 1rem;
}
.field-row[data-v-fbaba1d5] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.field label[data-v-fbaba1d5] {
  display: block; color: #c0c0d0; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.4rem;
}
.required-mark[data-v-fbaba1d5] { color: var(--loss);
}
.helper[data-v-fbaba1d5] {
  display: block; color: var(--text-mute); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4;
}
.field-error[data-v-fbaba1d5] {
  display: block; color: var(--loss); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4;
}
.mono-input[data-v-fbaba1d5],
.select-input[data-v-fbaba1d5],
.date-input[data-v-fbaba1d5] {
  width: 100%; padding: 0.6rem 0.8rem; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 0.95rem;
}
.mono-input[data-v-fbaba1d5] { font-family: 'SF Mono', 'Menlo', monospace; letter-spacing: 0.03em;
}
.date-input[data-v-fbaba1d5] { color-scheme: dark;
}
.mono-input[data-v-fbaba1d5]:focus,
.select-input[data-v-fbaba1d5]:focus,
.date-input[data-v-fbaba1d5]:focus { outline: none; border-color: #5b8af5;
}
.input-with-prefix[data-v-fbaba1d5] {
  display: flex; align-items: stretch; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.input-with-prefix[data-v-fbaba1d5]:focus-within { border-color: #5b8af5;
}
.input-with-prefix .prefix[data-v-fbaba1d5],
.leg-input-strike .prefix[data-v-fbaba1d5] {
  display: flex; align-items: center; padding: 0 0.7rem; background: var(--border);
  color: var(--text-dim); font-size: 0.9rem;
}
.input-with-prefix input[data-v-fbaba1d5] {
  flex: 1; background: transparent; border: none; padding: 0.6rem 0.8rem;
  color: #fff; font-size: 0.95rem;
}
.input-with-prefix input[data-v-fbaba1d5]:focus { outline: none;
}
.legs-section[data-v-fbaba1d5] { margin-bottom: 1rem;
}
.legs-heading[data-v-fbaba1d5] {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.leg-row[data-v-fbaba1d5] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.7rem;
  padding: 0.55rem 0.75rem;
  background: #16162b;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  align-items: center;
}
.leg-row-puts[data-v-fbaba1d5] { border-left: 3px solid rgba(var(--loss-rgb), 0.6);
}
.leg-row-calls[data-v-fbaba1d5] { border-left: 3px solid rgba(var(--profit-rgb), 0.6);
}
.leg-badges[data-v-fbaba1d5] { display: inline-flex; gap: 0.3rem; align-items: center; grid-row: 1 / 2;
}
.leg-label[data-v-fbaba1d5] { color: var(--text-dim); font-size: 0.78rem; grid-column: 2 / 3; grid-row: 1 / 2;
}
.leg-inputs[data-v-fbaba1d5] {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.leg-row:has(.leg-input-exp) .leg-inputs[data-v-fbaba1d5] { grid-template-columns: 1fr 1fr;
}
.leg-row:not(:has(.leg-input-exp)) .leg-inputs[data-v-fbaba1d5] { grid-template-columns: 1fr;
}
.leg-input-strike[data-v-fbaba1d5] {
  display: flex; background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
.leg-input-strike[data-v-fbaba1d5]:focus-within { border-color: #5b8af5;
}
.leg-input-strike input[data-v-fbaba1d5] {
  flex: 1; background: transparent; border: none; padding: 0.45rem 0.6rem;
  color: #fff; font-size: 0.9rem;
}
.leg-input-strike input[data-v-fbaba1d5]:focus { outline: none;
}
.leg-input-exp[data-v-fbaba1d5] {
  width: 100%; padding: 0.45rem 0.6rem; background: var(--panel-solid); border: 1px solid var(--border);
  border-radius: 6px; color: #fff; font-size: 0.85rem; color-scheme: dark;
}
.leg-input-exp[data-v-fbaba1d5]:focus { outline: none; border-color: #5b8af5;
}
.action-badge[data-v-fbaba1d5] {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.action-badge.mini[data-v-fbaba1d5] { padding: 0.05rem 0.3rem; font-size: 0.65rem;
}
.action-bto[data-v-fbaba1d5] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.4);
}
.action-sto[data-v-fbaba1d5] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
}
.direction-badge[data-v-fbaba1d5] {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.dir-call[data-v-fbaba1d5] { background: rgba(var(--profit-rgb), 0.1); color: #4ade80; border: 1px solid rgba(var(--profit-rgb), 0.3);
}
.dir-put[data-v-fbaba1d5]  { background: rgba(var(--loss-rgb), 0.1); color: #f87171; border: 1px solid rgba(var(--loss-rgb), 0.3);
}
.group-badge[data-v-fbaba1d5] {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.group-badge.mini[data-v-fbaba1d5] { padding: 0.05rem 0.25rem; font-size: 0.6rem;
}
.preview-row[data-v-fbaba1d5] {
  margin: 0.75rem 0 1rem; padding: 0.65rem 0.85rem;
  background: #16162b; border: 1px dashed var(--border); border-radius: 8px;
}
.preview-head[data-v-fbaba1d5] {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.preview-label[data-v-fbaba1d5] {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute);
}
.preview-net[data-v-fbaba1d5] {
  display: inline-flex; gap: 0.5rem; align-items: center;
  color: #93c5fd; font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.85rem;
}
.effect-badge[data-v-fbaba1d5] {
  padding: 0.1rem 0.4rem; border-radius: 4px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
}
.effect-credit[data-v-fbaba1d5] { background: rgba(var(--profit-rgb), 0.18); color: #4ade80; border: 1px solid rgba(var(--profit-rgb), 0.4);
}
.effect-debit[data-v-fbaba1d5]  { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4);
}
.preview-legs[data-v-fbaba1d5] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem;
}
.preview-leg[data-v-fbaba1d5] {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.82rem; color: #d4d4d8;
}
.preview-symbol[data-v-fbaba1d5] { color: #5b8af5;
}
.preview-error[data-v-fbaba1d5] { color: #f87171; margin: 0; font-size: 0.82rem;
}
.actions-row[data-v-fbaba1d5] {
  margin-top: auto; padding-top: 0.75rem;
  display: flex; justify-content: flex-end;
}
.btn-primary[data-v-fbaba1d5] {
  background: #5b8af5; color: #fff; border: none; padding: 0.65rem 1.4rem;
  border-radius: 8px; font-size: 0.93rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.btn-primary[data-v-fbaba1d5]:hover:not(:disabled) { background: #4a78d8;
}
.btn-primary[data-v-fbaba1d5]:disabled { background: #3a3a54; color: var(--text-mute); cursor: not-allowed;
}
.btn-submit[data-v-fbaba1d5] {
  min-width: 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-spinner[data-v-fbaba1d5] {
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff; border-radius: 50%; animation: spin-fbaba1d5 0.8s linear infinite;
}
@keyframes spin-fbaba1d5 {
to { transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.field-row[data-v-fbaba1d5] { grid-template-columns: 1fr;
}
}

.trade-section[data-v-5b28d1fa] {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.trade-section.turbo[data-v-5b28d1fa] {
  border-color: rgba(234, 88, 12, 0.4);
  background: linear-gradient(180deg, var(--panel-solid) 0%, rgba(234, 88, 12, 0.03) 100%);
}
.section-head[data-v-5b28d1fa] { margin-bottom: 1rem;
}
.section-head h2[data-v-5b28d1fa] { margin: 0 0 0.25rem 0; color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem;
}
.section-head .section-desc[data-v-5b28d1fa] { margin: 0; color: var(--text-mute); font-size: 0.85rem; line-height: 1.4;
}
.section-head .section-desc code[data-v-5b28d1fa] {
  background: var(--border); color: #a0c0f5;
  padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.76rem;
}
.error-text[data-v-5b28d1fa] { color: var(--loss);
}
.price-pending[data-v-5b28d1fa] { text-align: center; color: #a0c0f5; margin-top: 0.6rem;
}
.field[data-v-5b28d1fa] { margin-bottom: 1rem;
}
.field-row[data-v-5b28d1fa] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.field label[data-v-5b28d1fa] {
  display: block; color: #c0c0d0; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.4rem;
}
.required-mark[data-v-5b28d1fa] { color: var(--loss);
}
.helper[data-v-5b28d1fa] {
  display: block; color: var(--text-mute); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4;
}
.small-number-input[data-v-5b28d1fa] {
  width: 100%; padding: 0.6rem 0.8rem; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 1rem;
}
.small-number-input[data-v-5b28d1fa]:focus { outline: none; border-color: #5b8af5;
}

/* Free-text ticker input + quick-pick chips */
.ticker-input[data-v-5b28d1fa] {
  width: 100%; padding: 0.6rem 0.8rem; background: #16162b; border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: 1rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ticker-input[data-v-5b28d1fa]::placeholder { letter-spacing: normal; text-transform: none; font-weight: 400; color: var(--text-dim);
}
.ticker-input[data-v-5b28d1fa]:focus { outline: none; border-color: #5b8af5;
}
.ticker-input.invalid[data-v-5b28d1fa] { border-color: var(--loss);
}
.ticker-chips[data-v-5b28d1fa] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem;
}
.ticker-chip[data-v-5b28d1fa] {
  background: #16162b; border: 1px solid var(--border); color: var(--text-dim);
  padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ticker-chip.active[data-v-5b28d1fa] { background: #5b8af5; border-color: #5b8af5; color: #fff;
}
.ticker-chip[data-v-5b28d1fa]:not(.active):hover { color: #fff; border-color: #5b8af5;
}

/* Smart Contract Logic toggle */
.smart-toggle[data-v-5b28d1fa] {
  display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  padding: 0.75rem 0.85rem; margin-bottom: 1rem;
  background: rgba(91, 138, 245, 0.06); border: 1px solid rgba(91, 138, 245, 0.3);
  border-radius: 10px;
}
.smart-toggle input[data-v-5b28d1fa] { position: absolute; opacity: 0; width: 0; height: 0;
}
.smart-switch[data-v-5b28d1fa] {
  flex: 0 0 auto; position: relative; width: 38px; height: 22px; margin-top: 0.1rem;
  background: #2a2a45; border-radius: 999px; transition: background 0.15s;
}
.smart-switch[data-v-5b28d1fa]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.15s;
}
.smart-toggle input:checked + .smart-switch[data-v-5b28d1fa] { background: #5b8af5;
}
.smart-toggle input:checked + .smart-switch[data-v-5b28d1fa]::after { transform: translateX(16px);
}
.smart-toggle input:focus-visible + .smart-switch[data-v-5b28d1fa] { box-shadow: 0 0 0 2px rgba(91, 138, 245, 0.5);
}
.smart-text[data-v-5b28d1fa] { display: flex; flex-direction: column; gap: 0.15rem;
}
.smart-text strong[data-v-5b28d1fa] { color: #fff; font-size: 0.9rem; font-weight: 600;
}
.smart-text small[data-v-5b28d1fa] { color: var(--text-mute); font-size: 0.78rem; line-height: 1.4;
}
.segmented-control button[data-v-5b28d1fa]:not(.active):hover { color: #fff;
}
.turbo-buttons[data-v-5b28d1fa] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem;
}
.turbo-btn[data-v-5b28d1fa] {
  border: none; border-radius: 12px; padding: 1.5rem 1rem;
  font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  transition: transform 0.08s, box-shadow 0.15s, filter 0.15s;
  min-height: 110px;
}
.turbo-btn.long[data-v-5b28d1fa] { background: linear-gradient(180deg, var(--profit) 0%, #15803d 100%); box-shadow: 0 4px 16px rgba(var(--profit-rgb), 0.25);
}
.turbo-btn.short[data-v-5b28d1fa] { background: linear-gradient(180deg, var(--loss) 0%, #991b1b 100%); box-shadow: 0 4px 16px rgba(var(--loss-rgb), 0.25);
}
.turbo-btn[data-v-5b28d1fa]:hover:not(:disabled) { filter: brightness(1.08);
}
.turbo-btn[data-v-5b28d1fa]:active:not(:disabled) { transform: translateY(1px);
}
.turbo-btn[data-v-5b28d1fa]:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed;
}
.turbo-btn-label[data-v-5b28d1fa] {
  font-size: 1.2rem; letter-spacing: 0.05em;
}
.turbo-btn-sub[data-v-5b28d1fa] {
  font-size: 0.78rem; font-weight: 500; opacity: 0.85;
}
.btn-spinner[data-v-5b28d1fa] {
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff; border-radius: 50%; animation: spin-5b28d1fa 0.8s linear infinite;
}
@keyframes spin-5b28d1fa {
to { transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.field-row[data-v-5b28d1fa] { grid-template-columns: 1fr;
}
.turbo-buttons[data-v-5b28d1fa] { grid-template-columns: 1fr;
}
}

.hybrid-trade-container[data-v-2f625e51] {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* Access Denied */
.access-denied[data-v-2f625e51] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.access-denied h1[data-v-2f625e51] { color: var(--loss); margin-bottom: 1rem; font-family: var(--display);
}
.access-denied p[data-v-2f625e51] { color: var(--text-mute);
}

/* Header */
.mt-page-head[data-v-2f625e51] { margin-bottom: 1.5rem;
}
.mt-subtitle[data-v-2f625e51] { line-height: 1.5; max-width: 70ch;
}

/* Strategy Context panel */
.mt-context-panel[data-v-2f625e51] { margin-bottom: 1.5rem;
}
.ctx-loading[data-v-2f625e51] { color: var(--text-mute); padding: 0.5rem 0;
}
.ctx-empty[data-v-2f625e51] { text-align: center; padding: 1rem 0;
}
.ctx-empty p[data-v-2f625e51] { margin: 0.25rem 0; color: var(--text-dim);
}
.ctx-empty p.subtle[data-v-2f625e51] { color: var(--text-mute); font-size: 0.9rem; margin-bottom: 1rem;
}
.ctx-empty .btn-primary[data-v-2f625e51] { display: inline-flex; margin-top: 0.75rem; text-decoration: none;
}
.ctx-selector-row[data-v-2f625e51] { display: flex; flex-direction: column; gap: 0.5rem;
}
.ctx-select-label[data-v-2f625e51] { color: var(--text-dim); font-size: 0.9rem;
}
/* widen the segmented rd-ui-select to fill the row */
.ctx-select[data-v-2f625e51] { width: 100%; font-size: 0.95rem;
}

/* "Make this my default strategy" checkbox */
.ctx-default-row[data-v-2f625e51] {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  cursor: pointer;
}
.ctx-default-row input[type='checkbox'][data-v-2f625e51] {
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.ctx-default-text[data-v-2f625e51] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.ctx-default-help[data-v-2f625e51] { color: var(--text-mute); font-size: 0.78rem;
}
.ctx-summary[data-v-2f625e51] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.ctx-summary-item[data-v-2f625e51] { display: flex; flex-direction: column; gap: 0.2rem;
}
.ctx-summary-label[data-v-2f625e51] {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute);
}
.ctx-summary-value[data-v-2f625e51] { font-size: 0.95rem; color: var(--text); font-weight: 500;
}
.ctx-counter-remaining[data-v-2f625e51] { color: var(--text-mute); font-weight: 400; font-size: 0.85rem; margin-left: 0.25rem;
}

/* Sections layout */
.sections[data-v-2f625e51] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 960px) {
.sections[data-v-2f625e51] { grid-template-columns: 1fr 1fr;
}
}

/* Manual-entry form panel chrome (wraps the form child components) */
.mt-form-panel[data-v-2f625e51] { display: flex; flex-direction: column;
}
.mt-form-pad[data-v-2f625e51] { padding: 18px;
}

/* Single Leg / Spread mode toggle (live accounts only) */
.mt-mode-toggle[data-v-2f625e51] {
  padding: 14px 18px 0;
  display: flex;
  justify-content: flex-start;
}
/* the form child already supplies its own <section> wrapper — flatten its outer chrome */
.mt-form-pad[data-v-2f625e51] .trade-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Form heading → redesign panel-title vocabulary */
.mt-form-pad[data-v-2f625e51] .section-head {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mt-form-pad[data-v-2f625e51] .section-head h2 {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  letter-spacing: -.01em;
}
.mt-form-pad[data-v-2f625e51] .section-desc {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 6px;
  font-family: var(--mono);
  line-height: 1.5;
}

/* Field labels */
.mt-form-pad[data-v-2f625e51] .field label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mute);
  font-weight: 600;
}
.mt-form-pad[data-v-2f625e51] .required-mark { color: var(--accent);
}
.mt-form-pad[data-v-2f625e51] .helper { color: var(--text-mute); font-family: var(--mono);
}
.mt-form-pad[data-v-2f625e51] .field-error { color: var(--loss);
}

/* Text / date / number inputs → rd-ui-input vocabulary */
.mt-form-pad[data-v-2f625e51] .mono-input,
.mt-form-pad[data-v-2f625e51] .date-input,
.mt-form-pad[data-v-2f625e51] .small-number-input,
.mt-form-pad[data-v-2f625e51] .input-with-prefix input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 9px 13px;
  border-radius: 10px;
  width: 100%;
}
.mt-form-pad[data-v-2f625e51] .mono-input,
.mt-form-pad[data-v-2f625e51] .small-number-input { font-family: var(--mono);
}
.mt-form-pad[data-v-2f625e51] .mono-input:focus,
.mt-form-pad[data-v-2f625e51] .date-input:focus,
.mt-form-pad[data-v-2f625e51] .small-number-input:focus,
.mt-form-pad[data-v-2f625e51] .input-with-prefix input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.mt-form-pad[data-v-2f625e51] .input-with-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-form-pad[data-v-2f625e51] .input-with-prefix .prefix {
  color: var(--text-mute);
  font-family: var(--mono);
}

/* Segmented controls (direction / order-type / turbo ticker) → rd-seg vocabulary */
.mt-form-pad[data-v-2f625e51] .segmented-control {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
}
.mt-form-pad[data-v-2f625e51] .segmented-control button {
  background: none;
  border: none;
  color: var(--text-mute);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: .16s;
}
.mt-form-pad[data-v-2f625e51] .segmented-control button:hover { color: var(--text-dim);
}
.mt-form-pad[data-v-2f625e51] .segmented-control button.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.6));
  color: var(--accent-ink);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3);
}
.mt-form-pad[data-v-2f625e51] .segmented-control button.call.active {
  background: linear-gradient(135deg, var(--profit), rgba(var(--profit-rgb), 0.7));
}
.mt-form-pad[data-v-2f625e51] .segmented-control button.put.active {
  background: linear-gradient(135deg, var(--loss), rgba(var(--loss-rgb), 0.7));
}

/* Order preview row */
.mt-form-pad[data-v-2f625e51] .preview-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.mt-form-pad[data-v-2f625e51] .preview-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mute);
  font-weight: 600;
}
.mt-form-pad[data-v-2f625e51] .preview-value {
  font-family: var(--mono);
  color: var(--text);
  font-weight: 600;
}

/* Submit button → rd-tb-solid vocabulary */
.mt-form-pad[data-v-2f625e51] .btn-primary,
.mt-form-pad[data-v-2f625e51] .turbo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--display);
  padding: 10px 16px;
  cursor: pointer;
  transition: .16s;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: var(--accent-ink);
  box-shadow: var(--glow);
}
.mt-form-pad[data-v-2f625e51] .turbo-btn.long {
  background: linear-gradient(135deg, var(--profit), rgba(var(--profit-rgb), 0.7));
}
.mt-form-pad[data-v-2f625e51] .turbo-btn.short {
  background: linear-gradient(135deg, var(--loss), rgba(var(--loss-rgb), 0.7));
}
.mt-form-pad[data-v-2f625e51] .btn-primary:hover:not(:disabled),
.mt-form-pad[data-v-2f625e51] .turbo-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.mt-form-pad[data-v-2f625e51] .btn-primary:disabled,
.mt-form-pad[data-v-2f625e51] .turbo-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Prompt card (no strategy selected) — rd-empty supplies the base look */
.prompt-card[data-v-2f625e51] { padding: 2rem;
}

/* Toast */
.toast[data-v-2f625e51] {
  position: fixed; bottom: 2rem; right: 2rem; padding: 1rem 1.5rem;
  border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; z-index: 1100;
  box-shadow: var(--shadow-lg); max-width: 420px;
}
.toast.success[data-v-2f625e51] { background: var(--profit); color: var(--accent-ink);
}
.toast.error[data-v-2f625e51] { background: var(--loss); color: var(--accent-ink);
}
.toast-enter-active[data-v-2f625e51], .toast-leave-active[data-v-2f625e51] { transition: all 0.3s var(--ease-out);
}
.toast-enter-from[data-v-2f625e51], .toast-leave-to[data-v-2f625e51] { opacity: 0; transform: translateY(20px);
}
@media (max-width: 640px) {
.ctx-summary[data-v-2f625e51] { grid-template-columns: 1fr 1fr;
}
}

.copy-trade-container[data-v-6dce9555] {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem;
}
.access-denied[data-v-6dce9555] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.access-denied h1[data-v-6dce9555] { color: var(--loss); margin-bottom: 1rem;
}
.access-denied p[data-v-6dce9555] { color: var(--text-mute);
}

/* Page head subtitle — wraps the broadcast explainer under the rd-page-title.
 * Wider than the default rd-page-sub line so the sentence reads on 1-2 lines. */
.ct-page-head[data-v-6dce9555] { margin-bottom: 18px;
}
.ct-subtitle[data-v-6dce9555] {
  max-width: 64ch;
  line-height: 1.55;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--text-dim);
}
.ct-subtitle strong[data-v-6dce9555] { color: var(--accent); font-weight: 600;
}
.ct-subtitle em[data-v-6dce9555] { color: var(--accent-2); font-style: normal; font-weight: 600;
}
.impersonation-banner[data-v-6dce9555] {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--radius-md, 12px);
  color: var(--accent);
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.impersonation-banner strong[data-v-6dce9555] { color: var(--text);
}
.sections[data-v-6dce9555] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/*
 * Three entry slots side-by-side on widescreens, collapsing to 2 then 1 as
 * the viewport narrows. minmax(320px, 1fr) is the breakpoint: at 320px each
 * slot's labels and inputs still read cleanly without wrapping; below that
 * the strike + segmented Call/Put control gets cramped. Alerts Today
 * remains in its own row below at full container width — it reads better
 * as a wide table than wedged beside the forms.
 */
.entry-slots[data-v-6dce9555] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Per-slot wrapper (a glass rd-panel) that puts the Single/Spread mode
 * toggle above the form. The form section underneath sets its own card
 * chrome so the toggle reads as a separate piece of UI floating above. */
.entry-slot-wrap[data-v-6dce9555] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 14px 15px;
}
.slot-mode-toggle[data-v-6dce9555] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.slot-mode-label[data-v-6dce9555] {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--display);
}

/* Close split-button popover for IC / IB spread closes. Anchored to the
 * Close ▾ button via absolute positioning; closeMenuOpenId gates render. */
.close-menu[data-v-6dce9555] {
  position: relative;
  display: inline-block;
}
.close-menu-popover[data-v-6dce9555] {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  background: var(--panel-solid);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 10px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
  min-width: 10rem;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
}
.close-menu-item[data-v-6dce9555] {
  background: transparent;
  border: none;
  color: var(--accent);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.close-menu-item[data-v-6dce9555]:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--text);
}
.toast[data-v-6dce9555] {
  position: fixed; bottom: 2rem; right: 2rem; padding: 1rem 1.5rem;
  border-radius: 12px; font-size: 0.9rem; font-weight: 600; z-index: 1100;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4)); max-width: 420px;
  font-family: var(--display);
}
.toast.success[data-v-6dce9555] { background: var(--profit); color: var(--accent-ink);
}
.toast.error[data-v-6dce9555] { background: var(--loss); color: var(--accent-ink);
}
.toast.warn[data-v-6dce9555] { background: var(--accent-2); color: var(--accent-ink);
}
.toast-enter-active[data-v-6dce9555], .toast-leave-active[data-v-6dce9555] { transition: all 0.3s ease;
}
.toast-enter-from[data-v-6dce9555], .toast-leave-to[data-v-6dce9555] { opacity: 0; transform: translateY(20px);
}

/* .alerts-today carries rd-panel for its glass chrome; this only sets the
 * inner body padding now (rd-panel-head supplies the header padding). */
.alerts-panel-body[data-v-6dce9555] {
  padding: 0 18px 16px;
}
.alerts-header h2[data-v-6dce9555] {
  margin: 0;
}
.alerts-header-controls[data-v-6dce9555] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.alerts-error[data-v-6dce9555] {
  color: var(--loss);
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.alerts-empty[data-v-6dce9555] {
  margin: 0.5rem 0;
}

/* .alerts-table carries rd-rt; this only sets the slightly tighter
 * cell padding the dense action table needs (the rd-rt 18px gutters
 * are too wide for this many columns) and the tabular font size. */
.alerts-table[data-v-6dce9555] {
  font-size: 0.85rem;
}
.alerts-table th[data-v-6dce9555] {
  padding: 0.5rem 0.75rem;
}
.alerts-table td[data-v-6dce9555] {
  padding: 0.5rem 0.75rem;
}
.ticker-cell[data-v-6dce9555] { font-family: ui-monospace, monospace; font-size: 0.8rem;
}
.averaged-pill[data-v-6dce9555] {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--paper) 15%, transparent);
  color: var(--paper);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  font-family: inherit;
  line-height: 1.2;
}
.averaged-pill[data-v-6dce9555]:hover { background: color-mix(in srgb, var(--paper) 25%, transparent); border-color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.averaged-pill[data-v-6dce9555]:focus-visible { outline: 2px solid var(--paper); outline-offset: 1px;
}

/* Inline accordion under an AVG row — five-column grid mirroring the order
 * of fields the operator scans (Order / Time / Qty / Entry / P&L %). The
 * cell's TD removes its top border so the breakdown reads as a continuation
 * of the row it expanded from, not a separate row. */
.avg-breakdown-tr td.avg-breakdown-cell[data-v-6dce9555] {
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  border-top: none;
  padding: 0.5rem 1rem 0.75rem 2rem;
}
.avg-breakdown[data-v-6dce9555] {
  /* Fluid + self-contained: match the card width and never force it wider.
     overflow-x is a safety net so a pathological value scrolls WITHIN the card
     rather than spilling past its border. The narrow-card @container query
     below reflows the grid so the common case fits with no scroll at all. */
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 2px solid color-mix(in srgb, var(--paper) 40%, transparent);
  padding-left: 0.85rem;
}
.avg-breakdown-head[data-v-6dce9555],
.avg-breakdown-row[data-v-6dce9555] {
  display: grid;
  grid-template-columns: 6rem 7rem 4rem 6rem 6rem;
  gap: 0.5rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}
.avg-breakdown-head[data-v-6dce9555] {
  color: var(--text-dim);
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}
.avg-breakdown-row[data-v-6dce9555] { color: var(--text); padding: 0.15rem 0;
}
.avg-order-label[data-v-6dce9555] { color: var(--paper); font-weight: 600;
}

/* Clickable wrapper around the spread-type pill in the ticker cell.
 * Looks visually identical to the bare pill (the button itself is
 * borderless / background-less) but adds a caret indicator + cursor +
 * keyboard focus. Triggers row expansion via the shared
 * isExpanded/toggleExpanded state that the AVG pill also uses. */
.spread-pill-trigger[data-v-6dce9555] {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  vertical-align: middle;
}
.spread-pill-trigger[data-v-6dce9555]:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  border-radius: 4px;
}
.spread-pill-caret[data-v-6dce9555] {
  font-size: 0.65rem;
  color: var(--paper);
  opacity: 0.7;
}
.spread-pill-trigger:hover .spread-pill-caret[data-v-6dce9555] { opacity: 1;
}

/* Per-leg breakdown row — opens below a spread alert when the operator
 * clicks the spread-type pill. Five-column grid mirroring the head
 * labels: action badge, OCC symbol, entry cost, current price, P&L %.
 * Visually paired with the AVG breakdown row (same purple-tinted
 * background) so the two stack cleanly when both are open. */
.legs-breakdown-tr td.legs-breakdown-cell[data-v-6dce9555] {
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  border-top: none;
  padding: 0.5rem 1rem 0.75rem 2rem;
}
.legs-breakdown[data-v-6dce9555] {
  /* Same containment model as .avg-breakdown — fluid to the card width with an
     overflow-x safety net; the @container query below reflows it to fit. */
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 2px solid color-mix(in srgb, var(--paper) 40%, transparent);
  padding-left: 0.85rem;
}
.legs-breakdown-head[data-v-6dce9555],
.legs-breakdown-row[data-v-6dce9555] {
  display: grid;
  grid-template-columns: 4rem 14rem 6rem 6rem 6rem;
  gap: 0.5rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
.legs-breakdown-head[data-v-6dce9555] {
  color: var(--text-dim);
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}
.legs-breakdown-row[data-v-6dce9555] { color: var(--text); padding: 0.15rem 0;
}
/* Sub-spread group caption — separates the two verticals of a 4-leg strategy
 * (e.g. an Iron Condor's put pair from its call pair) and names each one. Only
 * rendered when the strategy has more than one closeGroup. */
.legs-breakdown-group-label[data-v-6dce9555] {
  margin-top: 0.55rem;
  padding: 0.1rem 0 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legs-breakdown-group-label.is-first[data-v-6dce9555] {
  margin-top: 0.15rem;
  border-top: none;
}
.leg-action-pill[data-v-6dce9555] {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  width: fit-content;
}
.leg-action-pill.leg-bto[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
  border: 1px solid rgba(var(--profit-rgb), 0.4);
}
.leg-action-pill.leg-sto[data-v-6dce9555] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
}
.leg-symbol[data-v-6dce9555] {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
}
/* Sign-based baseline (green when above entry, red when below) plus the
 * shared .pnl-flash-up / .pnl-flash-down tick highlight from src/style.css.
 * Same model as the P&L % column so a tick flashes both cells together
 * and they both return to their constant baseline color afterwards. */
.live-price-cell[data-v-6dce9555] {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  border-radius: 4px;
}
.live-price-cell.live-price-positive[data-v-6dce9555] { color: var(--profit);
}
.live-price-cell.live-price-negative[data-v-6dce9555] { color: var(--loss);
}
/* High/low watermarks since entry. Constant colors — green for the peak
 * we've reached, red for the deepest dip. No flash animation, since
 * they're slow-moving signals (only update on new extremes). */
.high-low-cell[data-v-6dce9555] {
  font-variant-numeric: tabular-nums;
}
.high-low-cell.high-cell[data-v-6dce9555] { color: var(--profit);
}
.high-low-cell.low-cell[data-v-6dce9555] { color: var(--loss);
}
/* Percent move from entry to the watermark, on its own line beneath the
 * price. Inherits the cell's green/red color but dimmed and smaller so the
 * price stays the primary read. */
.high-low-cell .hl-pct[data-v-6dce9555] {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}
/* P&L cell renders a constant sign-based baseline color (green when in the
 * money, red when out). The transient tick-flash background animation
 * lives in src/style.css under .pnl-flash-up / .pnl-flash-down and is
 * applied via the usePnlFlash composable. */
.pnl-cell[data-v-6dce9555] {
  --pnl-color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  color: var(--pnl-color);
  border-radius: 4px;
}
.pnl-cell.pnl-positive[data-v-6dce9555] { --pnl-color: var(--profit);
}
.pnl-cell.pnl-negative[data-v-6dce9555] { --pnl-color: var(--loss);
}
.stop-cell[data-v-6dce9555] { font-variant-numeric: tabular-nums; color: var(--accent-2);
}
.stop-multileg[data-v-6dce9555] { display: inline-flex; flex-direction: column; gap: 0.1rem; line-height: 1.2;
}
.stop-leg[data-v-6dce9555] { display: inline-flex; gap: 0.35rem; align-items: baseline;
}
.stop-leg-label[data-v-6dce9555] {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-2);
  opacity: 0.7;
}
.status-pill[data-v-6dce9555] {
  text-transform: uppercase;
}
.status-active[data-v-6dce9555] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.status-tracking[data-v-6dce9555] { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-2);
}
.status-closed[data-v-6dce9555] { background: var(--panel-2); color: var(--text-dim);
}
.status-expired[data-v-6dce9555] { background: rgba(var(--accent-rgb), 0.15); color: var(--accent-2);
}
.status-stopped[data-v-6dce9555] { background: rgba(var(--loss-rgb), 0.15); color: var(--loss);
}
.outcome-pill[data-v-6dce9555] {
  font-weight: 700;
}
.outcome-win[data-v-6dce9555] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.outcome-loss[data-v-6dce9555] { background: rgba(var(--loss-rgb), 0.15); color: var(--loss);
}
.outcome-be[data-v-6dce9555] { background: var(--panel-2); color: var(--text-dim);
}
.exit-btn[data-v-6dce9555] {
  background: rgba(var(--loss-rgb), 0.16);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
  color: var(--loss);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  transition: 0.16s var(--ease-out, ease);
  white-space: nowrap;
}
.exit-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.exit-btn[data-v-6dce9555]:hover:not(:disabled) { background: rgba(var(--loss-rgb), 0.28); border-color: rgba(var(--loss-rgb), 0.6);
}
.closed-marker[data-v-6dce9555] { color: var(--text-mute);
}

/* Action cluster: split-button scale-in next to the exit button. Same
 * green palette as the TradeCard scale-in for visual consistency across
 * the two surfaces. */
.action-cluster[data-v-6dce9555] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.scale-in-btn[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  border-right: none;
  color: var(--profit);
  padding: 0.35rem 0.6rem;
  border-radius: 6px 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.scale-in-btn[data-v-6dce9555]:hover:not(:disabled) { background: rgba(var(--profit-rgb), 0.25); border-color: rgba(var(--profit-rgb), 0.5);
}
.scale-in-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.scale-in-limit-btn[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  color: var(--profit);
  padding: 0.35rem 0.45rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.25rem;
  line-height: 1;
}
.scale-in-limit-btn[data-v-6dce9555]:hover:not(:disabled) { background: rgba(var(--profit-rgb), 0.25); border-color: rgba(var(--profit-rgb), 0.5);
}
.scale-in-limit-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.scale-in-prefix[data-v-6dce9555] { color: var(--profit); font-size: 0.85rem;
}
.scale-in-input[data-v-6dce9555] {
  width: 6ch;
  padding: 0.25rem 0.35rem;
  font-size: 0.8rem;
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.08);
  border: 1px solid rgba(var(--profit-rgb), 0.5);
  border-radius: 4px;
  outline: none;
}
.scale-in-input[data-v-6dce9555]:focus { border-color: var(--profit); background: rgba(var(--profit-rgb), 0.12);
}
/* Inline commit / cancel buttons next to the scale-in input. Required for
 * mobile because iOS's decimal numeric pad has no Return key — desktop
 * users keep their Enter / Esc shortcuts unchanged. */
.scale-in-confirm-btn[data-v-6dce9555],
.scale-in-cancel-btn[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.4);
  color: var(--profit);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  margin-left: 0.2rem;
  font-family: inherit;
}
.scale-in-confirm-btn[data-v-6dce9555]:hover:not(:disabled),
.scale-in-cancel-btn[data-v-6dce9555]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.28);
  border-color: rgba(var(--profit-rgb), 0.6);
}
.scale-in-cancel-btn[data-v-6dce9555] { color: var(--text-dim); background: var(--panel-2); border-color: var(--border);
}
.scale-in-cancel-btn[data-v-6dce9555]:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border-strong); color: var(--text);
}
.scale-in-confirm-btn[data-v-6dce9555]:disabled,
.scale-in-cancel-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}

/* Modify-SL inline edit — orange palette, distinct from the green scale-in
 * cluster and the solid-orange Send Exit. Same shape and behavior as scale-in
 * (button → inline input → Enter commits / Esc cancels). */
.modify-sl-btn[data-v-6dce9555] {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  color: var(--accent-2);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  white-space: nowrap;
  transition: 0.16s var(--ease-out, ease);
}
.modify-sl-btn[data-v-6dce9555]:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-2) 22%, transparent); border-color: color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.modify-sl-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.modify-sl-prefix[data-v-6dce9555] { color: var(--accent-2); font-size: 0.85rem;
}
.modify-sl-input[data-v-6dce9555] {
  width: 6ch;
  padding: 0.25rem 0.35rem;
  font-size: 0.8rem;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent);
  border-radius: 6px;
  outline: none;
}
.modify-sl-input[data-v-6dce9555]:focus { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}
.modify-sl-leg-select[data-v-6dce9555] {
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  color: var(--accent-2);
  padding: 0.2rem 0.3rem;
  font-size: 0.75rem;
  border-radius: 6px;
  outline: none;
  margin-right: 0.15rem;
  cursor: pointer;
}
.modify-sl-leg-select[data-v-6dce9555]:focus { border-color: var(--accent-2);
}
/* Inline commit / cancel for the modify-SL input. Same rationale as the
 * scale-in pair above. Orange palette to match the modify-SL color scheme. */
.modify-sl-confirm-btn[data-v-6dce9555],
.modify-sl-cancel-btn[data-v-6dce9555] {
  background: color-mix(in srgb, var(--accent-2) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  color: var(--accent-2);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  margin-left: 0.2rem;
  font-family: inherit;
}
.modify-sl-confirm-btn[data-v-6dce9555]:hover:not(:disabled),
.modify-sl-cancel-btn[data-v-6dce9555]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-2) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
}
.modify-sl-cancel-btn[data-v-6dce9555] { color: var(--text-dim); background: var(--panel-2); border-color: var(--border);
}
.modify-sl-cancel-btn[data-v-6dce9555]:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border-strong); color: var(--text);
}
.modify-sl-confirm-btn[data-v-6dce9555]:disabled,
.modify-sl-cancel-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}

/* Bracket badge on the ✓ commit button — applied when both SL and TP
 * editors are open on the same alert (and same bracket for spreads) with
 * valid dirty drafts. The commit will fire a single modify-bracket
 * cancel-replace instead of two. Cyan accent distinguishes it from the
 * orange Modify SL / Modify TP palette. */
.modify-sl-confirm-btn.is-bracket[data-v-6dce9555] {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--accent);
  padding-right: 0.8rem;
  position: relative;
}
.modify-sl-confirm-btn.is-bracket[data-v-6dce9555]:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.8);
}
.modify-sl-confirm-btn.is-bracket[data-v-6dce9555]::after {
  content: 'B';
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
}

/* Discoverability hint shown inside an open SL/TP editor when the sibling
 * editor isn't open yet. Tapping it opens the other editor (same bracket
 * for spreads) so the next commit fires one modify-bracket. */
.bracket-hint[data-v-6dce9555] {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(var(--accent-rgb), 0.8);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  user-select: none;
}
.bracket-hint[data-v-6dce9555]:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.75);
  border-style: solid;
}

/* ─── Copy Trade card layout (replaces the alerts table) ─────────────── */
/* Responsive: 1 card per row on mobile, 2 on tablet/laptop, 3 on wide desktop.
   grid-auto-rows:1fr + align-items:stretch make every card the same height
   (the tallest card's), so the grid reads as a uniform set rather than a
   ragged one. Card content stays top-aligned; shorter cards just gain some
   empty space at the bottom. */
.ct-cards[data-v-6dce9555] {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 0.75rem;
}
@media (min-width: 760px) {
.ct-cards[data-v-6dce9555] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.ct-cards[data-v-6dce9555] { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ct-alert-card[data-v-6dce9555] {
  /* Container context so the leg rows below respond to THIS card's width
     (not the viewport) — they collapse gracefully whether the card is narrow
     because of a small screen or because there are 3 across a wide one. */
  container-type: inline-size;
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ct-alert-card.ct-status-active[data-v-6dce9555] { border-left: 3px solid var(--profit);
}
.ct-alert-card.ct-tracking[data-v-6dce9555] { border-left: 3px solid var(--accent-2);
}

/* ─── Copy Trade LIST / table view ──────────────────────────────────────
   A denser alternative to the card grid: one aligned row per trade with a
   click-to-expand drawer that holds the exact same .ct-card-body management
   controls. Reuses the card's data helpers and colour classes; only the
   summary presentation + body-collapse differ. Mobile-safe: the columnar
   grid collapses to labelled stacked cells (no horizontal scroll), and the
   drawer reflows via the card's own @container queries. */
.ct-list[data-v-6dce9555] { display: flex; flex-direction: column; gap: 0.4rem;
}

/* Shared column template so the header labels and every summary row line up. */
.ct-list-head[data-v-6dce9555],
.ct-list-summary[data-v-6dce9555] {
  display: grid;
  grid-template-columns:
    minmax(50px, 0.6fr)   /* time   */
    minmax(120px, 1.7fr)  /* ticker */
    minmax(52px, 0.8fr)   /* entry  */
    minmax(52px, 0.8fr)   /* price  */
    minmax(60px, 0.9fr)   /* p&l    */
    minmax(52px, 0.8fr)   /* high   */
    minmax(52px, 0.8fr)   /* low    */
    minmax(84px, 1fr)     /* status */
    22px;                 /* caret  */
  align-items: center;
  gap: 0.5rem;
}
.ct-list-head[data-v-6dce9555] {
  padding: 0.2rem 0.75rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.ct-list-head .ctl-col-num[data-v-6dce9555] { text-align: right;
}

/* In list mode the article becomes a tight row shell; keep its border,
   status left-stripe, background and container-type from the base rule. */
.ct-alert-card.ct-list-mode[data-v-6dce9555] { padding: 0; gap: 0; border-radius: 10px;
}
.ct-list-summary[data-v-6dce9555] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--text);
  text-align: left;
}
.ct-list-summary[data-v-6dce9555]:hover { background: rgba(var(--accent-rgb), 0.06);
}
.ct-list-summary[data-v-6dce9555]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
}
.ct-alert-card.ct-managing .ct-list-summary[data-v-6dce9555] {
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px dashed var(--border);
}
.ct-list-summary .ctl-cell[data-v-6dce9555] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-list-summary .ctl-col-num[data-v-6dce9555] { text-align: right;
}
.ct-list-summary .ctl-col-ticker[data-v-6dce9555] {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  white-space: normal; overflow: visible;
}
.ct-list-summary .ctl-ticker-txt[data-v-6dce9555] { font-family: var(--display); font-weight: 700;
}
.ct-list-summary .ctl-col-status[data-v-6dce9555] { display: inline-flex; align-items: center; gap: 0.35rem; white-space: normal; overflow: visible;
}
.ct-list-summary .ctl-col-caret[data-v-6dce9555] { text-align: center; color: var(--text-dim);
}
/* High/Low direction colours (the .ct-hl-* rules elsewhere target .ct-stat-val,
   so re-declare for the flat summary cell). */
.ct-list-summary .ctl-hl.ct-hl-favorable[data-v-6dce9555] { color: var(--profit);
}
.ct-list-summary .ctl-hl.ct-hl-adverse[data-v-6dce9555] { color: var(--loss);
}

/* Body drawer: collapsed until the row is expanded; padded once open since the
   article itself has no padding in list mode. */
.ct-alert-card.ct-list-mode:not(.ct-managing) .ct-card-body[data-v-6dce9555],
.ct-alert-card.ct-list-mode:not(.ct-managing) .ct-card-sub[data-v-6dce9555] { display: none;
}
.ct-alert-card.ct-list-mode .ct-card-body[data-v-6dce9555] { padding: 0.6rem 0.75rem 0.75rem;
}
.ct-alert-card.ct-list-mode .ct-card-sub[data-v-6dce9555] { padding: 0 0.75rem 0.75rem;
}

/* Mobile: drop the column header and stack each summary into labelled cells. */
@media (max-width: 759px) {
.ct-list-head[data-v-6dce9555] { display: none;
}
.ct-list-summary[data-v-6dce9555] {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.9rem;
    padding: 0.65rem 2.1rem 0.65rem 0.75rem;
}
.ct-list-summary .ctl-col-num[data-v-6dce9555] { text-align: left;
}
.ct-list-summary .ctl-cell[data-v-6dce9555]:not(.ctl-col-ticker):not(.ctl-col-status)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin-bottom: 0.05rem;
}
.ct-list-summary .ctl-col-ticker[data-v-6dce9555],
  .ct-list-summary .ctl-col-status[data-v-6dce9555] { grid-column: 1 / -1;
}
.ct-list-summary .ctl-col-caret[data-v-6dce9555] {
    position: absolute; top: 0.65rem; right: 0.75rem;
    grid-column: auto; margin: 0;
}
}
.ct-card-head[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
}
.ct-card-id[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.ct-alert-time[data-v-6dce9555] { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mute);
}
.ct-alert-ticker[data-v-6dce9555] { font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--text);
}
.ct-maxpct-pill[data-v-6dce9555] { font-weight: 700; background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.ct-card-stats[data-v-6dce9555] { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; align-items: baseline;
}
.ct-stat[data-v-6dce9555] { display: inline-flex; flex-direction: column; gap: 0.1rem;
}
.ct-stat-label[data-v-6dce9555] { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute);
}
.ct-stat-val[data-v-6dce9555] { font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--text);
}
/* Favorable extreme = green, adverse = red. For a long the HIGH is favorable
   and the LOW adverse; a credit spread / short is reversed (LOW = cheapest
   buyback = favorable), so the template picks the class by direction. */
.ct-hl-favorable .ct-stat-val[data-v-6dce9555] { color: var(--profit);
}
.ct-hl-adverse .ct-stat-val[data-v-6dce9555] { color: var(--loss);
}
.ct-stat-val .hl-pct[data-v-6dce9555] { margin-left: 0.25rem; font-size: 0.7rem; opacity: 0.8;
}
.ct-card-body[data-v-6dce9555] { display: flex; flex-direction: column; gap: 0.5rem;
}
/* Always-visible scale-in / averaged orders, above the exit legs. */
.ct-card-orders[data-v-6dce9555] { padding-bottom: 0.45rem; border-bottom: 1px dashed var(--border);
}
/* AVG is now a static badge (breakdown is always shown) — drop button affordances. */
.averaged-pill.is-static[data-v-6dce9555] { cursor: default;
}
.ct-leg-list[data-v-6dce9555] { display: flex; flex-direction: column; gap: 0.5rem;
}
.ct-leg-row[data-v-6dce9555] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(120px, 1.4fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  background: var(--panel-solid, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ct-leg-row[data-v-6dce9555]:not(.ct-leg-multi) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 2fr);
}
.leg-tag[data-v-6dce9555] { font-size: 0.72rem; font-weight: 700; color: var(--accent-2); opacity: 0.8;
}
.ct-leg-field[data-v-6dce9555] { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.ct-leg-field-label[data-v-6dce9555] { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.ct-field-tp .ct-leg-field-label[data-v-6dce9555] { color: var(--profit);
}
.ct-field-sl .ct-leg-field-label[data-v-6dce9555] { color: var(--loss);
}
.ct-price-editable[data-v-6dce9555] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease;
  color: var(--accent-2);
}
.ct-price-editable[data-v-6dce9555]:hover { border-bottom-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
}
.ct-price-editable.is-busy[data-v-6dce9555] { opacity: 0.6; cursor: progress;
}
.ct-leg-viz[data-v-6dce9555] { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; min-width: 100px;
}
.ct-leg-bars[data-v-6dce9555] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem;
}
/* Persistent per-leg outcome badge — ✓ once TP reached, ✕ once SL reached. */
.ct-leg-outcome[data-v-6dce9555] {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.ct-leg-outcome.is-tp[data-v-6dce9555] { color: var(--profit); background: rgba(var(--profit-rgb), 0.16); border: 1px solid rgba(var(--profit-rgb), 0.45);
}
.ct-leg-outcome.is-sl[data-v-6dce9555] { color: var(--loss); background: rgba(var(--loss-rgb), 0.16); border: 1px solid rgba(var(--loss-rgb), 0.45);
}
/* Manually-closed leg — terminal, but neither a win nor a loss target, so it
   reads neutral rather than borrowing the TP/SL colors. */
.ct-leg-outcome.is-manual[data-v-6dce9555] { color: var(--text-muted); background: rgba(128, 128, 128, 0.16); border: 1px solid rgba(128, 128, 128, 0.45);
}
/* Profit-lock marker: the leg's stop was ratcheted up after another leg hit TP. */
.ct-lock-icon[data-v-6dce9555] { margin-left: 0.25rem; font-size: 0.7rem; line-height: 1; cursor: help; opacity: 0.9;
}
.ct-leg-close-btn[data-v-6dce9555] {
  background: rgba(var(--loss-rgb), 0.14);
  border: 1px solid rgba(var(--loss-rgb), 0.4);
  color: var(--loss);
  width: 1.5rem; height: 1.5rem;
  border-radius: 6px;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ct-leg-close-btn[data-v-6dce9555]:hover:not(:disabled) { background: rgba(var(--loss-rgb), 0.28);
}
.ct-leg-close-btn[data-v-6dce9555]:disabled { opacity: 0.4; cursor: not-allowed;
}
.ct-bulk-row[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.ct-bulk-label[data-v-6dce9555] { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); margin-right: 0.15rem;
}

/* Bulk "set all" + auto-exit share one wrapping row. The larger column-gap
   visually separates the two groups; they wrap to their own lines when the
   card is narrow. */
.ct-controls-row[data-v-6dce9555] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem;
  padding-top: 0.45rem; margin-top: 0.1rem;
  border-top: 1px dashed var(--border);
}
.ct-master-row[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.ct-master-label[data-v-6dce9555] {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); font-weight: 700; cursor: help; margin-right: 0.15rem;
}
.ct-master-field[data-v-6dce9555] { display: inline-flex; align-items: center; gap: 0.25rem;
}
/* Unit picker for the armed levels: price / P&L $ / P&L %. */
.ct-master-mode-select[data-v-6dce9555] {
  background: var(--panel-2); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 4px; font-size: 0.7rem;
  padding: 1px 3px; font-family: inherit; cursor: pointer;
}
.ct-master-mode-select[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.ct-master-chip[data-v-6dce9555] {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  padding: 1px 7px; border-radius: 6px;
}
.ct-master-chip.tp[data-v-6dce9555] { background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
.ct-master-chip.sl[data-v-6dce9555] { background: rgba(var(--loss-rgb), 0.15); color: var(--loss);
}
.ct-master-adjust[data-v-6dce9555] { display: inline-flex; align-items: center; gap: 0.25rem;
}
.ct-stepper[data-v-6dce9555] { display: inline-flex; flex-direction: column; line-height: 0;
}
.ct-step-btn[data-v-6dce9555] {
  display: flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 0.85rem; padding: 0;
  font-size: 0.55rem; color: var(--text-dim);
  background: var(--panel-2); border: 1px solid var(--border);
  cursor: pointer; transition: 0.12s var(--ease-out, ease);
}
.ct-step-btn[data-v-6dce9555]:first-child { border-radius: 5px 5px 0 0;
}
.ct-step-btn[data-v-6dce9555]:last-child { border-radius: 0 0 5px 5px; border-top: none;
}
.ct-step-btn[data-v-6dce9555]:hover:not(:disabled) { color: var(--accent-2); border-color: var(--accent-2);
}
.ct-step-btn[data-v-6dce9555]:disabled { opacity: 0.4; cursor: not-allowed;
}

/* Whole-trade auto SCALE-IN — same row grammar as .ct-master-row above, in the
 * GREEN scale-in palette rather than the orange auto-exit one. The color is
 * the tell: everything green on this card adds to the position, everything
 * orange/red takes it off. It reuses .ct-master-field / .ct-master-mode-select
 * / .ct-stepper / .ct-step-btn verbatim so the two rows line up pixel-wise. */
.ct-scale-in-trigger-row[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
/* In the spread action cluster the row sits INLINE among the other buttons
 * rather than on its own line, so it must not stretch. */
.ct-scale-in-trigger-row.is-spread[data-v-6dce9555] { display: inline-flex; flex-wrap: wrap;
}
.ct-scale-in-label[data-v-6dce9555] {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--profit); font-weight: 700; cursor: help; margin-right: 0.15rem;
}
/* Repaint the borrowed orange modify-sl input/affix/confirm green so the whole
 * editor reads as one green control. */
.ct-scale-in-affix[data-v-6dce9555] { color: var(--profit);
}
.ct-scale-in-input[data-v-6dce9555] {
  width: 7ch;
  color: var(--profit);
  background: rgba(var(--profit-rgb), 0.08);
  border-color: rgba(var(--profit-rgb), 0.5);
}
.ct-scale-in-input[data-v-6dce9555]:focus { border-color: var(--profit); background: rgba(var(--profit-rgb), 0.12);
}
.ct-scale-in-confirm[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  border-color: rgba(var(--profit-rgb), 0.4);
  color: var(--profit);
}
.ct-scale-in-confirm[data-v-6dce9555]:hover:not(:disabled) {
  background: rgba(var(--profit-rgb), 0.28);
  border-color: rgba(var(--profit-rgb), 0.6);
}
/* The armed chip carries a whole sentence ("Add when price rises to $2.50"),
 * not a bare number, so it gets no fixed width and must not wrap mid-phrase. */
.ct-scale-in-chip[data-v-6dce9555] {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  padding: 1px 7px; border-radius: 6px; white-space: nowrap;
  background: rgba(var(--profit-rgb), 0.15); color: var(--profit);
}
/* Live "now …" reading beside the draft box — informational, so it stays
 * muted and never competes with the value being typed. */
.ct-scale-in-current[data-v-6dce9555] {
  font-family: var(--mono); font-size: 0.65rem; color: var(--text-mute);
  white-space: nowrap;
}
.ct-scale-in-trigger-btn[data-v-6dce9555] {
  background: rgba(var(--profit-rgb), 0.15);
  border: 1px solid rgba(var(--profit-rgb), 0.3);
  color: var(--profit);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--display);
  cursor: pointer;
  white-space: nowrap;
  transition: 0.16s var(--ease-out, ease);
}
.ct-scale-in-trigger-btn[data-v-6dce9555]:hover:not(:disabled) { background: rgba(var(--profit-rgb), 0.25); border-color: rgba(var(--profit-rgb), 0.5);
}
.ct-scale-in-trigger-btn[data-v-6dce9555]:disabled { opacity: 0.5; cursor: not-allowed;
}
.ct-legs-readonly[data-v-6dce9555] { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
}
.ct-ro-col[data-v-6dce9555] { display: inline-flex; flex-direction: column; gap: 0.1rem;
}
.ct-ro-label[data-v-6dce9555] { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute);
}
.ct-card-actions[data-v-6dce9555] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.ct-close-all-btn[data-v-6dce9555] { margin-left: auto;
}
.ct-card-sub[data-v-6dce9555] { margin-top: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.5rem;
}

/* Progress bars — ported from TradeCard (dual distance bars + marker track) */
.oco-distance-bar[data-v-6dce9555] { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden;
}
.oco-distance-fill[data-v-6dce9555] { height: 100%; border-radius: 4px; transition: width 0.3s var(--ease-out, ease);
}
.oco-distance-fill.loss[data-v-6dce9555] { background: linear-gradient(90deg, var(--loss), rgba(var(--loss-rgb), 0.45));
}
.oco-distance-fill.profit[data-v-6dce9555] { background: linear-gradient(90deg, rgba(var(--profit-rgb), 0.45), var(--profit));
}
.oco-bar[data-v-6dce9555] {
  position: relative; height: 1.5rem;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; overflow: visible;
}
.oco-zone[data-v-6dce9555] { position: absolute; top: 0; height: 100%;
}
.oco-zone.loss-zone-bg[data-v-6dce9555] { background: rgba(var(--loss-rgb), 0.12); border-radius: 8px 0 0 8px;
}
.oco-zone.profit-zone-bg[data-v-6dce9555] { background: rgba(var(--profit-rgb), 0.1); border-radius: 0 8px 8px 0;
}
.oco-zone.current-profit[data-v-6dce9555] { background: rgba(var(--profit-rgb), 0.32);
}
.oco-zone.current-loss[data-v-6dce9555] { background: rgba(var(--loss-rgb), 0.32);
}
.oco-marker[data-v-6dce9555] { position: absolute; top: 0; height: 100%; z-index: 2; transition: left 0.3s var(--ease-out, ease);
}
.oco-marker.sl-marker[data-v-6dce9555] { width: 3px; background: var(--loss);
}
.oco-marker.entry-marker[data-v-6dce9555] { width: 2px; background: var(--text-mute); z-index: 5;
}
.oco-marker.tp-marker[data-v-6dce9555] { width: 3px; background: var(--profit);
}
.oco-marker.current-marker[data-v-6dce9555] { width: 4px; border-radius: 2px; z-index: 10;
}
.oco-marker.current-marker.positive[data-v-6dce9555] { background: var(--profit); box-shadow: 0 0 8px var(--profit);
}
.oco-marker.current-marker.negative[data-v-6dce9555] { background: var(--loss); box-shadow: 0 0 8px var(--loss);
}

/* When a card is narrow (small screen, or 3-up on a not-huge desktop), stack
   the leg fields two-up with the progress bar spanning the full width. Keyed to
   the card's own width via the container context on .ct-alert-card. */
@container (max-width: 420px) {
.ct-leg-row[data-v-6dce9555], .ct-leg-row[data-v-6dce9555]:not(.ct-leg-multi) { grid-template-columns: 1fr 1fr;
}
.ct-leg-viz[data-v-6dce9555] { grid-column: 1 / -1;
}
.ct-leg-close-btn[data-v-6dce9555] { justify-self: end;
}
}

/* Narrow cards (portrait phones, and the 2-up/3-up desktop cards that are
   themselves < ~520px): reflow the AVG scale-in and spread-leg breakdown
   tables from their fixed-rem column tracks to fluid ones so they fit the
   card instead of overflowing it. Font shrinks a touch and long OCC symbols
   wrap; the base rules' overflow-x is only a fallback for extreme values. */
@container (max-width: 520px) {
.avg-breakdown-head[data-v-6dce9555],
  .avg-breakdown-row[data-v-6dce9555] {
    grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr) minmax(1.4rem, auto) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.3rem;
    font-size: 0.72rem;
}
.legs-breakdown-head[data-v-6dce9555],
  .legs-breakdown-row[data-v-6dce9555] {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.3rem;
    font-size: 0.72rem;
}
  /* Grid items default to min-width:auto, which refuses to shrink below their
     content — force them to 0 so the fluid tracks can actually compress. */
.avg-breakdown-head[data-v-6dce9555] > *,
  .avg-breakdown-row[data-v-6dce9555] > *,
  .legs-breakdown-head[data-v-6dce9555] > *,
  .legs-breakdown-row[data-v-6dce9555] > * {
    min-width: 0;
}
  /* Let the long option symbol wrap within its cell rather than force width. */
.leg-symbol[data-v-6dce9555] { overflow-wrap: anywhere;
}
}

.agent-chat-container[data-v-0eee46e3] {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 0;
}

/* Tier gate — shown to non-Elite users in place of the chat UI. */
.ac-gate-loading[data-v-0eee46e3] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.ac-spinner[data-v-0eee46e3] {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ac-spin-0eee46e3 0.8s linear infinite;
}
@keyframes ac-spin-0eee46e3 {
to { transform: rotate(360deg);
}
}
.ac-upgrade-gate[data-v-0eee46e3] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}
.ac-upgrade-card[data-v-0eee46e3] {
  max-width: 520px;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), var(--panel) 55%);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ac-upgrade-badge[data-v-0eee46e3] {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: var(--glow);
}
.ac-upgrade-title[data-v-0eee46e3] {
  color: var(--text);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}
.ac-upgrade-desc[data-v-0eee46e3] {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
}
.ac-upgrade-meta[data-v-0eee46e3] {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-bottom: 1.5rem;
}
.ac-upgrade-meta strong[data-v-0eee46e3] {
  color: var(--text);
}
.ac-upgrade-cta[data-v-0eee46e3] {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--glow);
  transition: filter 0.16s var(--ease-out), transform 0.1s var(--ease-out);
}
.ac-upgrade-cta[data-v-0eee46e3]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.ac-upgrade-cta[data-v-0eee46e3]:active {
  transform: translateY(1px);
}

/* ---------- maintenance notice ---------- */
/* Amber is hard-coded (not accent-derived) so the "under maintenance" signal
   stays consistent across every accent theme. */
.ac-maint-gate[data-v-0eee46e3] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}
.ac-maint-card[data-v-0eee46e3] {
  max-width: 520px;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.1), var(--panel) 55%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ac-maint-badge[data-v-0eee46e3] {
  display: inline-block;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.ac-maint-title[data-v-0eee46e3] {
  color: var(--text);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}
.ac-maint-desc[data-v-0eee46e3] {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}
.ac-maint-cta[data-v-0eee46e3] {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: filter 0.16s var(--ease-out), transform 0.1s var(--ease-out);
}
.ac-maint-cta[data-v-0eee46e3]:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ac-maint-cta[data-v-0eee46e3]:active {
  transform: translateY(1px);
}

/* ---------- page head ---------- */
.ac-head[data-v-0eee46e3] {
  margin-bottom: 0;
}
.ac-title[data-v-0eee46e3] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ac-beta-tag[data-v-0eee46e3] {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 0.16rem 0.45rem;
  border-radius: 6px;
  box-shadow: var(--glow);
}
.ac-new-btn[data-v-0eee46e3] {
  white-space: nowrap;
}

/* ---------- chat panel ---------- */
.ac-panel[data-v-0eee46e3] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 16px;
}

/* ---------- chat thread ---------- */
.ai-chat[data-v-0eee46e3] {
  flex: 1;
  min-height: 320px;
  overflow-y: auto;
  padding: 4px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-status[data-v-0eee46e3] {
  color: var(--text-mute);
  font-style: italic;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
.ai-msg[data-v-0eee46e3] {
  display: flex;
  gap: 9px;
  max-width: 88%;
  align-items: flex-start;
}
.ai-av[data-v-0eee46e3] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 9px;
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.ai-bubble[data-v-0eee46e3] {
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  line-height: 1.45;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* user bubble — gradient accent, right aligned */
.ai-msg--user[data-v-0eee46e3] {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-msg--user .ai-av[data-v-0eee46e3] {
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--accent);
}
.ai-msg--user .ai-bubble[data-v-0eee46e3] {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.6));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.25);
}

/* assistant bubble */
.ai-msg--assistant[data-v-0eee46e3] {
  align-self: flex-start;
}
.ai-msg--assistant .ai-av[data-v-0eee46e3] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: var(--glow);
}

/* system message — centered, muted */
.ai-msg--system[data-v-0eee46e3] {
  align-self: center;
  max-width: 100%;
}
.ai-msg--system .ai-av[data-v-0eee46e3] {
  background: var(--panel-2);
  color: var(--text-mute);
}
.ai-msg--system .ai-bubble[data-v-0eee46e3] {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-mute);
  font-size: 0.85rem;
  font-style: italic;
}

/* typing indicator */
.ai-bubble--typing[data-v-0eee46e3] {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.ai-typing-dot[data-v-0eee46e3] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  animation: ai-typing-0eee46e3 1.2s infinite ease-in-out;
}
.ai-typing-dot[data-v-0eee46e3]:nth-child(2) { animation-delay: 0.15s;
}
.ai-typing-dot[data-v-0eee46e3]:nth-child(3) { animation-delay: 0.3s;
}
.ai-typing-meta[data-v-0eee46e3] {
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-mute);
}
@keyframes ai-typing-0eee46e3 {
0%, 80%, 100% { opacity: 0.3; transform: translateY(0);
}
40% { opacity: 1; transform: translateY(-3px);
}
}

/* ---------- error banner ---------- */
.ai-error[data-v-0eee46e3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 18px 12px;
  padding: 0.6rem 0.9rem;
  background: rgba(var(--loss-rgb), 0.12);
  border: 1px solid rgba(var(--loss-rgb), 0.35);
  border-radius: var(--radius-md);
  color: var(--loss);
  font-size: 0.9rem;
}
.ai-error-dismiss[data-v-0eee46e3] {
  background: transparent;
  border: 1px solid rgba(var(--loss-rgb), 0.45);
  color: var(--loss);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--display);
  font-weight: 600;
  transition: background 0.16s var(--ease-out);
}
.ai-error-dismiss[data-v-0eee46e3]:hover {
  background: rgba(var(--loss-rgb), 0.16);
}

/* ---------- input row ---------- */
.ai-input-form[data-v-0eee46e3] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 18px;
}
.ai-input[data-v-0eee46e3] {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 12px;
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}
.ai-input[data-v-0eee46e3]:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.ai-input textarea[data-v-0eee46e3] {
  flex: 1;
  resize: vertical;
  min-height: 56px;
  padding: 0.45rem 0.2rem;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.ai-input textarea[data-v-0eee46e3]:focus {
  outline: none;
}
.ai-input textarea[data-v-0eee46e3]::placeholder {
  color: var(--text-mute);
}
.ai-input textarea[data-v-0eee46e3]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ac-send-btn[data-v-0eee46e3] {
  flex: none;
  min-width: 104px;
  justify-content: center;
  align-self: stretch;
}
.ai-input-footer[data-v-0eee46e3] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0.2rem;
}
.ai-char-count[data-v-0eee46e3] {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-mute);
}
.ai-char-count.warn[data-v-0eee46e3] {
  color: var(--accent-2);
}

.ss-wrap[data-v-00e41b8e] {
  position: relative;
  display: inline-flex;
}
.ss-icon[data-v-00e41b8e] {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 5px;
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ss-icon[data-v-00e41b8e]:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(96, 165, 250, 0.6);
}
.ss-count[data-v-00e41b8e] {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.ss-empty[data-v-00e41b8e] {
  color: #475569;
}

/* Teleported popover — fixed so table overflow can't clip it. */
.ss-popover[data-v-00e41b8e] {
  position: fixed;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.ss-popover img[data-v-00e41b8e] {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.ss-popover-more[data-v-00e41b8e] {
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: center;
}

/* Lightbox */
.ss-overlay[data-v-00e41b8e] {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  padding: 2rem;
}
.ss-modal[data-v-00e41b8e] {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 2.2rem 1.2rem 1.2rem;
}
.ss-close[data-v-00e41b8e] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.18);
  color: #e5e7eb;
  font-size: 1rem;
  cursor: pointer;
}
.ss-close[data-v-00e41b8e]:hover {
  background: rgba(148, 163, 184, 0.32);
}
.ss-modal-body[data-v-00e41b8e] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.ss-figure[data-v-00e41b8e] {
  margin: 0;
  max-width: 100%;
}
.ss-figure img[data-v-00e41b8e] {
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.ss-figure figcaption[data-v-00e41b8e] {
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
}

.bt[data-v-db95b7dd] {
  margin-top: 1.5rem;
}
.bt-head[data-v-db95b7dd] {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.bt-head h3[data-v-db95b7dd] {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #e5e7eb;
}
.bt-count[data-v-db95b7dd] {
  font-size: 0.75rem;
  color: #64748b;
}
.bt-scroll[data-v-db95b7dd] {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}
.bt-table[data-v-db95b7dd] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.bt-table thead th[data-v-db95b7dd] {
  position: sticky;
  top: 0;
  background: #0f172a;
  color: #cbd5e1;
  font-weight: 600;
  text-align: right;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  cursor: pointer;
  user-select: none;
}
.bt-table thead .bt-group-row th[data-v-db95b7dd] {
  cursor: default;
  text-align: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: none;
  padding-bottom: 0.2rem;
}
.bt-group-row .grp-call[data-v-db95b7dd] {
  color: var(--profit);
}
.bt-group-row .grp-put[data-v-db95b7dd] {
  color: #f87171;
}
.bt-group-row .grp-exit[data-v-db95b7dd] {
  color: #60a5fa;
}
.bt-table thead th[data-v-db95b7dd]:first-child,
.bt-table tbody td[data-v-db95b7dd]:first-child {
  text-align: left;
}
.bt-table thead th.sort-active[data-v-db95b7dd] {
  color: #60a5fa;
}
.ind[data-v-db95b7dd] {
  margin-left: 0.2rem;
  font-size: 0.6rem;
}
.bt-table tbody td[data-v-db95b7dd] {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.key-cell[data-v-db95b7dd] {
  font-weight: 600;
  color: #e5e7eb !important;
}
.warn[data-v-db95b7dd] {
  margin-right: 0.25rem;
}
.bt-table tbody tr:hover td[data-v-db95b7dd] {
  background: rgba(59, 130, 246, 0.06);
}
.bt-table tbody tr.candidate td[data-v-db95b7dd] {
  background: rgba(var(--loss-rgb), 0.08);
}
.bt-table tbody tr.candidate:hover td[data-v-db95b7dd] {
  background: rgba(var(--loss-rgb), 0.14);
}
.grp-call-cell[data-v-db95b7dd] {
  background: rgba(var(--profit-rgb), 0.03);
}
.grp-put-cell[data-v-db95b7dd] {
  background: rgba(var(--loss-rgb), 0.03);
}
.grp-exit-cell[data-v-db95b7dd] {
  background: rgba(59, 130, 246, 0.03);
}
.good[data-v-db95b7dd] {
  color: var(--profit);
}
.mid[data-v-db95b7dd] {
  color: #fbbf24;
}
.bad[data-v-db95b7dd] {
  color: #f87171;
}
.bt-empty[data-v-db95b7dd] {
  text-align: center !important;
  color: #64748b;
  padding: 1.5rem !important;
}

.breakdown[data-v-7b8864ab] {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.bd-header h2[data-v-7b8864ab] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #e5e7eb;
}
.bd-sub[data-v-7b8864ab] {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
}
.bd-loading[data-v-7b8864ab] {
  color: #60a5fa;
  margin-left: 0.4rem;
}
.bd-controls[data-v-7b8864ab] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}
.bd-control[data-v-7b8864ab] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
.bd-control.checkbox[data-v-7b8864ab] {
  cursor: pointer;
}
.bd-input[data-v-7b8864ab] {
  padding: 0.3rem 0.45rem;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 5px;
  color: #e5e7eb;
  font-size: 0.8rem;
}
input.bd-input[type='number'][data-v-7b8864ab] {
  width: 4rem;
}
.bd-hint[data-v-7b8864ab] {
  font-size: 0.72rem;
  color: #64748b;
  max-width: 30rem;
}

/* Time of day */
.tod[data-v-7b8864ab] {
  margin-top: 2rem;
}
.tod-head[data-v-7b8864ab] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.tod-head h3[data-v-7b8864ab] {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #e5e7eb;
}
.tod-tz[data-v-7b8864ab] {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 400;
}
.tod-rows[data-v-7b8864ab] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tod-row[data-v-7b8864ab] {
  display: grid;
  grid-template-columns: 4rem 3rem 1fr 4.5rem;
  align-items: center;
  gap: 0.6rem;
}
.tod-label[data-v-7b8864ab] {
  font-size: 0.8rem;
  color: #cbd5e1;
  text-align: right;
}
.tod-count[data-v-7b8864ab] {
  font-size: 0.72rem;
  color: #64748b;
  text-align: right;
}
.tod-bar-wrap[data-v-7b8864ab] {
  height: 1.1rem;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.tod-bar[data-v-7b8864ab] {
  height: 100%;
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.55);
  transition: width 0.2s ease;
}
.tod-bar.pos[data-v-7b8864ab] {
  background: rgba(var(--profit-rgb), 0.5);
}
.tod-bar.neg[data-v-7b8864ab] {
  background: rgba(var(--loss-rgb), 0.5);
}
.tod-val[data-v-7b8864ab] {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #cbd5e1;
}
.tod-val.pos[data-v-7b8864ab] {
  color: var(--profit);
}
.tod-val.neg[data-v-7b8864ab] {
  color: #f87171;
}
.tod-empty[data-v-7b8864ab] {
  color: #64748b;
  font-size: 0.82rem;
}

.alerts-tracker[data-v-d9837ccd] {
  /* Shrink the whole page to the alerts table's natural width so every block —
     header, filter bar, and both tables — lines up to the same column, then
     center it like the other pages. fit-content is driven by the widest child
     (the alerts table, width: max-content); narrower blocks (filter bar,
     breakdown tables) fill it via their own width. max-width keeps things
     scrollable when the viewport is narrower than the content. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 1.25rem 1.5rem 2rem;
  color: var(--text);
}

/* Header */
.page-header[data-v-d9837ccd] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.header-titles h1[data-v-d9837ccd] {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.subtitle[data-v-d9837ccd] {
  margin: 0.25rem 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.header-actions[data-v-d9837ccd] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.last-updated[data-v-d9837ccd] {
  font-size: 0.75rem;
  color: var(--text-mute);
}
.auto-toggle[data-v-d9837ccd] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.refresh-btn[data-v-d9837ccd] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--cat-blue);
  font-size: 0.8rem;
  cursor: pointer;
}
.refresh-btn[data-v-d9837ccd]:disabled {
  opacity: 0.6;
  cursor: default;
}
.spinning[data-v-d9837ccd] {
  display: inline-block;
  animation: spin-d9837ccd 0.8s linear infinite;
}
@keyframes spin-d9837ccd {
to {
    transform: rotate(360deg);
}
}

/* Filter bar */
.filter-bar[data-v-d9837ccd] {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}
.filter-group[data-v-d9837ccd],
.filter-field[data-v-d9837ccd] {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filter-label[data-v-d9837ccd] {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
}
.chip-row[data-v-d9837ccd] {
  display: flex;
  gap: 0.35rem;
}
.chip[data-v-d9837ccd] {
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
}
.chip.active[data-v-d9837ccd] {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(96, 165, 250, 0.6);
  color: var(--cat-blue);
}
.filter-input[data-v-d9837ccd] {
  padding: 0.4rem 0.55rem;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  min-width: 9rem;
}
.filter-input[data-v-d9837ccd]:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
}
.filter-clear[data-v-d9837ccd] {
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(var(--loss-rgb), 0.35);
  border-radius: 6px;
  background: rgba(var(--loss-rgb), 0.08);
  color: var(--loss);
  font-size: 0.78rem;
  cursor: pointer;
  align-self: flex-end;
}

/* Metric range filters */
.metrics-filter[data-v-d9837ccd] {
  margin-bottom: 1rem;
}
.metrics-toggle[data-v-d9837ccd] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
}
.metrics-badge[data-v-d9837ccd] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.25);
  color: var(--cat-blue);
  font-size: 0.68rem;
  font-weight: 700;
}
.metrics-chevron[data-v-d9837ccd] {
  color: var(--text-mute);
  font-size: 0.7rem;
}
.metrics-panel[data-v-d9837ccd] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}
.metric-range[data-v-d9837ccd] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.metric-range-label[data-v-d9837ccd] {
  flex: 0 0 4.5rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.metric-input[data-v-d9837ccd] {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.78rem;
}
.metric-input[data-v-d9837ccd]:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
}
.metric-dash[data-v-d9837ccd] {
  color: var(--text-mute);
}

/* States */
.state-box[data-v-d9837ccd] {
  padding: 2rem;
  text-align: center;
  border-radius: 10px;
}
.state-box.error[data-v-d9837ccd] {
  background: rgba(var(--loss-rgb), 0.08);
  border: 1px solid rgba(var(--loss-rgb), 0.25);
  color: var(--loss);
}
.retry-btn[data-v-d9837ccd] {
  margin-top: 0.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text);
  cursor: pointer;
}

/* Table */
.table-scroll[data-v-d9837ccd] {
  position: relative;
  max-height: calc(100vh - 320px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}
.alerts-table[data-v-d9837ccd] {
  width: max-content;
  border-collapse: collapse;
  font-size: 0.8rem;
  white-space: nowrap;
}
.alerts-table thead th[data-v-d9837ccd] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f172a;
  color: var(--text-dim);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  user-select: none;
}
.alerts-table thead th.num[data-v-d9837ccd] {
  text-align: right;
}
.alerts-table thead th.center[data-v-d9837ccd] {
  text-align: center;
}
.alerts-table thead th.sortable[data-v-d9837ccd] {
  cursor: pointer;
}
.alerts-table thead th.sortable[data-v-d9837ccd]:hover {
  color: #fff;
}
.alerts-table thead th.sort-active[data-v-d9837ccd] {
  color: var(--cat-blue);
}
.sort-ind[data-v-d9837ccd] {
  margin-left: 0.25rem;
  font-size: 0.65rem;
}
.alerts-table tbody td[data-v-d9837ccd] {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  vertical-align: middle;
}
.alerts-table tbody tr[data-v-d9837ccd]:hover {
  background: rgba(59, 130, 246, 0.06);
}
.num[data-v-d9837ccd] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.center[data-v-d9837ccd] {
  text-align: center;
}
.nowrap[data-v-d9837ccd] {
  white-space: nowrap;
}
.time-cell[data-v-d9837ccd] {
  color: var(--text-dim);
}
.dim[data-v-d9837ccd] {
  color: var(--text-mute);
}
.pos[data-v-d9837ccd] {
  color: var(--profit);
}
.neg[data-v-d9837ccd] {
  color: var(--loss);
}

/* Symbol cell */
.sym-cell[data-v-d9837ccd] {
  display: flex;
  flex-direction: column;
}
.sym-main[data-v-d9837ccd] {
  font-weight: 600;
}
.sym-sub[data-v-d9837ccd] {
  font-size: 0.68rem;
  color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Grouped duplicate-strategy alerts */
.group-row[data-v-d9837ccd] {
  cursor: pointer;
}
.group-toggle[data-v-d9837ccd] {
  display: inline-block;
  width: 0.9rem;
  margin-right: 0.15rem;
  color: var(--text-mute);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.group-toggle.expanded[data-v-d9837ccd] {
  transform: rotate(90deg);
}
.group-row:hover .group-toggle[data-v-d9837ccd] {
  color: var(--cat-blue);
}
.pill-stack[data-v-d9837ccd] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.group-count[data-v-d9837ccd] {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-mute);
}
.group-child[data-v-d9837ccd] {
  background: rgba(15, 23, 42, 0.5);
}
.child-tick[data-v-d9837ccd] {
  display: inline-block;
  width: 0.9rem;
  margin-right: 0.15rem;
  color: var(--text-mute);
}

/* Badges & pills */
.src-badge[data-v-d9837ccd],
.dir-pill[data-v-d9837ccd],
.status-badge[data-v-d9837ccd],
.outcome-badge[data-v-d9837ccd] {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.src-legacy[data-v-d9837ccd] {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-dim);
  border-color: rgba(148, 163, 184, 0.3);
}
.src-signal-hub[data-v-d9837ccd] {
  background: rgba(168, 85, 247, 0.15);
  color: var(--cat-violet);
  border-color: rgba(168, 85, 247, 0.3);
}
.dir-pill[data-v-d9837ccd] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-dim);
}
.dir-call[data-v-d9837ccd] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.dir-put[data-v-d9837ccd] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
}
.dir-spread[data-v-d9837ccd] {
  background: rgba(59, 130, 246, 0.15);
  color: var(--cat-blue);
}
.status-active[data-v-d9837ccd] {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}
.status-closed[data-v-d9837ccd] {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-dim);
  border-color: rgba(148, 163, 184, 0.3);
}
.outcome-win[data-v-d9837ccd] {
  background: rgba(var(--profit-rgb), 0.15);
  color: var(--profit);
}
.outcome-loss[data-v-d9837ccd] {
  background: rgba(var(--loss-rgb), 0.15);
  color: var(--loss);
}
.outcome-breakeven[data-v-d9837ccd] {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-dim);
}
.empty-row[data-v-d9837ccd] {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-dim);
}
.loading-overlay[data-v-d9837ccd] {
  position: sticky;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(15, 23, 42, 0.85);
  color: var(--cat-blue);
  font-size: 0.8rem;
}

/* Pager */
.pager[data-v-d9837ccd] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
.page-size[data-v-d9837ccd] {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.page-size select[data-v-d9837ccd] {
  margin-left: 0.4rem;
  padding: 0.3rem 0.4rem;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  color: var(--text);
}
.pager-right[data-v-d9837ccd] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.page-btn[data-v-d9837ccd] {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}
.page-btn[data-v-d9837ccd]:disabled {
  opacity: 0.4;
  cursor: default;
}
.page-indicator[data-v-d9837ccd] {
  font-size: 0.8rem;
  color: var(--text-dim);
}