.glass-card,
.metric-card,
.analysis-card,
.summary-item,
.stats-box,
.rule-box,
.portfolio-trend-card,
.portfolio-pnl-analysis-card,
.rebalance-panel {
  border-color: var(--separator) !important;
  background: var(--surface-primary) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card {
  border-radius: var(--radius-card);
}

.glass-card::before {
  opacity: 0.38;
}

@media (hover: hover) and (pointer: fine) {
  .glass-card:hover,
  .metric-card:hover,
  .summary-item:hover,
  .stats-box:hover {
    border-color: var(--separator-strong) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

button,
.action-btn,
.icon-btn,
.filter-btn,
.tab-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.action-btn,
.icon-btn {
  min-height: 40px;
  border-radius: 11px;
  transition:
    color var(--motion-view) var(--ease-standard),
    background-color var(--motion-view) var(--ease-standard),
    border-color var(--motion-view) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard) !important;
}

.action-btn:active,
.icon-btn:active,
button:active {
  transform: scale(0.975) !important;
}

.btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: var(--accent) !important;
  box-shadow: none !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--accent-hover) !important;
  box-shadow: none !important;
}

.btn-secondary,
.icon-btn {
  border-color: var(--separator) !important;
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
}

.btn-danger {
  border-color: rgba(255, 69, 58, 0.22) !important;
  background: rgba(255, 69, 58, 0.1) !important;
  color: #ff9f99 !important;
}

.filter-tabs,
.journal-mode-tabs,
.portfolio-pnl-calendar-mode,
.portfolio-pnl-calendar-type,
.portfolio-pnl-rank-tabs,
.backtest-return-chart-toggle,
.backtest-buy-points-toggle {
  border: 1px solid var(--separator) !important;
  background: #151519 !important;
  box-shadow: none !important;
}

.filter-tabs .filter-btn,
.portfolio-pnl-calendar-mode button,
.portfolio-pnl-calendar-type button,
.portfolio-pnl-rank-tabs button,
.backtest-return-chart-toggle button,
.backtest-buy-points-toggle button {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
}

.filter-tabs .filter-btn.active,
.portfolio-pnl-calendar-mode button.active,
.portfolio-pnl-calendar-type button.active,
.portfolio-pnl-rank-tabs button.active,
.backtest-return-chart-toggle button.active,
.backtest-buy-points-toggle button.active {
  border-color: var(--separator-strong) !important;
  background: var(--surface-raised) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

.vibe-icon-wrapper,
.vibe-icon-wrapper.vibe-icon-blue,
.badge-info {
  border-color: var(--separator-info) !important;
  background: rgba(10, 132, 255, 0.12) !important;
  color: var(--text-info) !important;
}

.fixed-rule-field {
  border-color: var(--separator) !important;
  background: #17171a !important;
}

.badge,
[class*="badge"],
[class*="-tag"],
[class*="-pill"] {
  box-shadow: none !important;
}

input,
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea {
  min-height: 44px;
  border: 1px solid var(--separator) !important;
  border-radius: var(--radius-input) !important;
  background: #151519 !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  transition:
    border-color var(--motion-view) var(--ease-standard),
    background-color var(--motion-view) var(--ease-standard);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--separator-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(10, 132, 255, 0.72) !important;
  background: #1a1a1f !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12) !important;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.58;
}

.modal-overlay {
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  transition:
    opacity var(--motion-sheet) var(--ease-standard),
    visibility var(--motion-sheet) var(--ease-standard) !important;
}

.modal-content,
.auth-card,
.backtest-config-drawer {
  border-color: var(--separator-strong) !important;
  border-radius: var(--radius-sheet) !important;
  background: rgba(36, 36, 38, 0.96) !important;
  box-shadow: var(--shadow-raised) !important;
  backdrop-filter: saturate(140%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(24px) !important;
}

.modal-overlay.show .modal-content,
.modal-overlay.show .auth-card {
  animation: astraea-sheet-enter var(--motion-sheet) var(--ease-spring) both !important;
}

@keyframes astraea-sheet-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 56px;
  padding-top: 4px;
  border-color: var(--separator);
  background: rgba(36, 36, 38, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.close-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.settings-actions,
.modal-content-trade .form-actions,
.modal-content-price-action .settings-actions {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  padding: 12px 0 max(4px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
  background: linear-gradient(180deg, rgba(36, 36, 38, 0.68), rgba(36, 36, 38, 0.98) 28%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dashboard-view-status {
  border-color: var(--separator-info);
  border-radius: 12px;
  background: var(--surface-info);
}

.dashboard-view-status-indicator {
  border-color: rgba(10, 132, 255, 0.26);
  border-top-color: var(--accent);
}

.dashboard-view-status-copy strong {
  color: var(--text-primary);
}

.dashboard-view-status-copy span,
.dashboard-view-status-time {
  color: var(--text-muted);
}

.dashboard-view-status[data-state="error"] {
  border-color: rgba(255, 69, 58, 0.3);
  background: var(--surface-error);
}

.dashboard-view-status[data-state="empty"] {
  border-color: var(--separator-strong);
  background: var(--surface-empty);
}

.section-title,
.card-label-strong,
.stats-label {
  letter-spacing: -0.015em;
}

.section-title {
  text-wrap: balance;
}

.section-subtitle,
.card-subtitle-compact,
.backtest-logs-subtitle,
.portfolio-trend-header p {
  color: var(--text-muted) !important;
  text-wrap: pretty;
}

.table-wrapper {
  border-color: var(--separator);
  border-radius: 14px;
  background: #151519;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: #1f1f22 !important;
  color: var(--text-muted) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

#signals-view table th,
#price-action-view table th,
#backtest-view table th,
#health-view table th {
  border-bottom-color: var(--separator) !important;
  background: #1f1f22 !important;
  color: var(--text-muted) !important;
}

#signals-view table td,
#price-action-view table td,
#backtest-view table td,
#health-view table td {
  background: transparent !important;
}

#signals-view table tbody tr:hover td,
#price-action-view table tbody tr:hover td,
#backtest-view table tbody tr:hover td,
#health-view table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025) !important;
}

td {
  border-color: var(--separator) !important;
  color: var(--text-secondary);
}

tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.dashboard-empty-state {
  display: none;
  place-items: center;
  min-height: 260px;
  padding: 36px 20px;
  border: 1px dashed var(--separator-strong);
  border-radius: 16px;
  background: #17171a;
  text-align: center;
}

.dashboard-empty-state-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--accent);
}

.dashboard-empty-state h4 {
  margin-bottom: 6px;
  font-size: 17px;
}

.dashboard-empty-state p {
  max-width: 42ch;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 13px;
}

.strategy-unsaved-status {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 214, 10, 0.1);
  color: #ffe56c;
  font-size: 11px;
  font-weight: 600;
}

.strategy-form-message {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 69, 58, 0.22);
  border-radius: 12px;
  background: rgba(255, 69, 58, 0.08);
  color: #ffb4af;
  font-size: 12px;
}

#price-action-view.is-empty .dashboard-empty-state {
  display: grid;
}

#price-action-view.is-empty .journal-charts-grid,
#price-action-view.is-empty .journal-screenshot-wall-card,
#price-action-view.is-empty .table-wrapper {
  display: none;
}

.mobile-progressive-toggle {
  display: none;
}

.mobile-journal-filter-trigger,
.mobile-section-disclosure {
  display: none;
}

.content-visibility-section {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

#toast-container {
  z-index: var(--z-toast);
}

.toast-message {
  border-color: var(--separator-strong);
  border-radius: 14px;
  background: rgba(44, 44, 46, 0.94);
  box-shadow: var(--shadow-panel);
}