/* ═══════════════════════════════════════════════════════════
   EkatraCore — Professional Layout System
   Consistent spacing, typography, structure across all pages
   ═══════════════════════════════════════════════════════════ */

/* === GLOBAL TYPOGRAPHY === */
body {
  font-family: var(--font) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}
h1 { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; margin-bottom: 6px !important; }
h2 { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; margin-bottom: 12px !important; }
h3 { font-size: 15px !important; font-weight: 700 !important; }
p, .subtitle, .section-desc { line-height: 1.7 !important; }

/* === CONTAINERS === */
.container { max-width: 960px !important; margin: 0 auto !important; padding: 24px 20px !important; }

/* === TOP BARS === */
.top-bar, div[style*="border-bottom"][style*="padding:16px"],
div[style*="border-bottom"][style*="display:flex"][style*="justify-content"] {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* === CARDS & SECTIONS === */
.card, .section, .panel,
div[style*="border-radius:12px"][style*="padding:24px"],
div[style*="border-radius:14px"][style*="padding:24px"],
div[style*="border-radius:10px"][style*="padding:16px"],
div[style*="border-radius: 12px"][style*="padding"],
.trade-card, .preview-card, .chart-trade-section,
.contact-card, .address-section, .sample-card, .chart-sample {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s !important;
}

/* === FORM STRUCTURE === */
.form-grid, .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}
.form-group {
  margin-bottom: 16px !important;
}
.form-group.full, .form-group[style*="grid-column"] {
  grid-column: 1 / -1 !important;
}

/* === LABELS === */
label, .form-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 6px !important;
}

/* === INPUTS === */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
select, textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--bg-inset) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}
textarea {
  min-height: 80px !important;
  resize: vertical !important;
}
::placeholder {
  color: var(--text-tertiary) !important;
  font-weight: 400 !important;
}

/* === BUTTONS — Unified === */
button, .btn, [class*="btn-"] {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.btn, [class*="btn-"]:not([class*="btn-verify"]):not(.step-badge) {
  padding: 10px 18px !important;
  font-size: 13px !important;
}
.btn-sm, [class*="btn-sm"] {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* === BUTTON ROW — Consistent spacing === */
.btn-row, div[style*="display:flex"][style*="gap:10px"][style*="margin-top"] {
  display: flex !important;
  gap: 10px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}

/* === TABS / STEPS === */
.steps, div[class*="tabs"], div[style*="display:flex"][style*="gap:8px"][style*="margin-bottom:24px"] {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
.step-badge, .tab, [class*="tab-btn"] {
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.step-badge.active, .tab.active, [class*="tab-btn"].active,
.step-badge[style*="background:var(--accent)"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.step-badge.done {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
}

/* === UPLOAD ZONES === */
.upload-zone, div[style*="border:2px dashed"],
div[style*="border: 2px dashed"] {
  border: 2px dashed var(--border) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  background: var(--bg-inset) !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.upload-zone:hover, div[style*="border:2px dashed"]:hover {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
}

/* === TRADE CARDS === */
.trade-card {
  padding: 18px !important;
  margin-bottom: 14px !important;
  position: relative !important;
}
.trade-card .trade-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
}
.trade-card .trade-info {
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr !important;
  gap: 6px 16px !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}
.trade-card .trade-info .lbl {
  color: var(--text-tertiary) !important;
  font-weight: 500 !important;
}
.trade-card .trade-info .val {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.trade-card .trade-actions {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: flex !important;
  gap: 6px !important;
}
.trade-card .edit-trade, .trade-card .remove-trade {
  background: var(--bg-inset) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.trade-card .edit-trade:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}
.trade-card .remove-trade:hover {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: var(--danger-border) !important;
}

/* === P/L BADGES === */
.pl-badge {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.pl-badge.profit {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}
.pl-badge.loss {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

/* === STATUS BADGES === */
.status-badge, .app-status, [class*="status-"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* === NOTES / AI ANALYSIS === */
div[style*="background:rgba(99,102,241"],
div[style*="background:rgba(59,130,246,0.06)"],
div[style*="background:rgba(59,130,246,0.08)"] {
  background: var(--accent-light) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin-top: 8px !important;
}

/* === VERIFY ACTIONS === */
.tv-actions, .trade-verify-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}
.tv-btn, .btn-verify {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
}
.tv-correct, .btn-verify-correct {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}
.tv-correct.verified, .btn-verify-correct.verified {
  background: var(--success) !important;
  color: #fff !important;
}
.tv-fix, .btn-verify-fix {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

/* === VERIFICATION BAR === */
.verify-bar, .learning-bar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  margin: 12px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* === RESULT BOXES === */
.result-box {
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
}

/* === ALERT / WARNING BOXES === */
div[style*="background:#fef2f2"], div[style*="background:rgba(245,158,11"],
div[style*="background:#fffbeb"], div[style*="background:#fff7ed"],
div[style*="border:1px solid #f59e0b"], div[style*="border-color:#f59e0b"] {
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* === TABLES === */
table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
th {
  background: var(--bg-inset) !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
}
td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-top: 1px solid var(--border) !important;
}

/* === MODALS === */
.cm-overlay, .correction-modal-overlay,
div[style*="position:fixed"][style*="background:rgba(0,0,0"] {
  backdrop-filter: blur(4px) !important;
}
.cm-box, .correction-modal {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}
.cm-box h3, .correction-modal h3 {
  color: var(--accent) !important;
  font-size: 17px !important;
  margin-bottom: 16px !important;
}

/* === TOAST === */
.toast, div[id*="Toast"] {
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* === SECTION DIVIDERS === */
.divider, hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 24px 0 !important;
}

/* === QUICK LINKS GRID === */
.quick-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

/* === SECTION TITLES === */
.section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 16px !important;
}

/* === COLLAPSIBLE / DETAILS === */
details {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
summary {
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  background: var(--bg-inset) !important;
}

/* === SCREENSHOT GRID === */
.preview-grid, .screenshots-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}
.preview-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.2s !important;
}
.preview-item:hover {
  transform: scale(1.02) !important;
}

/* === BACK LINK === */
.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 16px !important;
}
.back-link:hover {
  color: var(--accent) !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .container { padding: 16px 12px !important; }
  h1 { font-size: 20px !important; }
  .form-grid, .form-row { grid-template-columns: 1fr !important; }
  .trade-card .trade-info { grid-template-columns: auto 1fr !important; }
  .quick-links { grid-template-columns: 1fr 1fr !important; }
  .steps { gap: 6px !important; }
  .top-bar { padding: 12px 14px !important; }
}
@media (max-width: 480px) {
  .quick-links { grid-template-columns: 1fr !important; }
  .btn-row { flex-direction: column !important; }
  .btn-row .btn, .btn-row button { width: 100% !important; justify-content: center !important; }
}