body{font-family:'Exo 2',sans-serif}
.nav-btn{padding:8px 16px;background:#d1fae5;border-radius:10px}
.glass-panel{background:rgba(236,253,245,.85);border-radius:20px;padding:24px}
.panel-title{font-size:20px;margin-bottom:16px;color:#047857}
.input{padding:12px;border-radius:12px;background:#ecfdf5;border:1px solid rgba(16,185,129,.4);width:100%}
.primary-btn{padding:10px 16px;border-radius:12px;background:#10b981;color:white}
.secondary-btn{background:#d1fae5;padding:8px 14px;border-radius:10px}
.stat-card{background:#ecfdf5;padding:16px;border-radius:14px;text-align:center}

/* ===================== */
/* TRADE CARD RESPONSIVE */
/* ===================== */

.trade-item {
  display: flex;
  flex-direction: column; /* Mobile default */
  gap: 24px;
  background: rgba(236,253,245,.9);
  border: 2px solid rgba(16,185,129,.45);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  transition: all .25s ease;
}

.trade-item:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

/* Desktop Layout */
@media (min-width: 1024px) {
  .trade-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* LEFT SIDE */
.trade-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* RIGHT SIDE */
.trade-right {
  width: 100%;
}

@media (min-width: 1024px) {
  .trade-right {
    width: 480px;
  }
}

/* Thumbnail Responsive */
.trade-thumb {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,.35);
  cursor: pointer;
  transition: transform .2s ease;
}
.trade-thumb:hover {
  transform: scale(1.04);
}

/* Notes + Buttons Layout */
.notes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .notes-wrapper {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Notes Box */
.notes-box {
  flex: 1;
  background: rgba(236,253,245,.85);
  border: 2px solid rgba(16,185,129,.4);
  border-radius: 16px;

  padding: 14px 18px;      /* reduce top padding */
  white-space: pre-line;

  display: flex;           /* control spacing */
  flex-direction: column;
  font-size: 14px;      /* 🔥 smaller text */
  gap: 1px;
  line-height: 1.5;     /* better readability */
}

.notes-title {
  font-weight: 600;
  color: #047857;
  margin: 0;   /* remove top margin */
}

.notes-content {
  margin: 0;              /* 🔥 removes hidden spacing */
  white-space: pre-line;
}
/* Icon Buttons */
.icon-buttons {
  display: flex;
  gap: 12px;
}

@media (min-width: 768px) {
  .icon-buttons {
    flex-direction: column;
  }
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn {
  background: #facc15;
}

.edit-btn:hover {
  background: #eab308;
}

.delete-btn {
  background: #ef4444;
  color: white;
}

.delete-btn:hover {
  background: #dc2626;
}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.modal-content{background:#ecfdf5;padding:20px;border-radius:16px;width:320px}
.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:100}
.image-modal img{max-width:90%;max-height:90%;border-radius:16px}
.hidden{display:none}

.month-header{
  font-size:18px;
  font-weight:600;
  margin:25px 0 10px;
  color:#065f46;
}