.log-form { padding: 20px; }

.activity-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: #f2f2f2;
  border-radius: 14px;
}

.activity-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #666;
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
  line-height: 1.2;
}

.activity-mode-btn.active {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.log-label {
  font-size: 12px; font-weight: 600; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px; display: block;
}

.type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.chip {
  padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  font-size: 13px; font-weight: 500; color: #555;
  cursor: pointer; transition: all 0.15s; background: #fff;
  font-family: inherit;
}

.chip:hover { border-color: #aaa; color: #0a0a0a; }
.chip.selected { border-color: #0a0a0a; background: #0a0a0a; color: #fff; }

.log-note {
  width: 100%; border: 1.5px solid #e0e0e0;
  border-radius: 12px; padding: 14px;
  font-size: 15px; font-family: inherit;
  resize: none; height: 110px; outline: none;
  color: #0a0a0a; background: #fafafa;
  transition: border-color 0.15s; margin-bottom: 20px;
  line-height: 1.5;
}

.log-note:focus { border-color: #0a0a0a; background: #fff; }
.log-note::placeholder { color: #bbb; }

.quick-stats { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

.activity-datetime {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.activity-date-wrap {
  flex: 1.2;
  min-width: 140px;
}

.activity-time-wrap {
  flex: 0.8;
  min-width: 110px;
}

.stat-input-date,
.stat-input-time {
  font-size: 15px;
  font-weight: 600;
  min-height: 24px;
}

.stat-input-date::-webkit-calendar-picker-indicator,
.stat-input-time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
}

.stat-input-wrap {
  flex: 1; min-width: 120px;
  background: #f7f7f7;
  border: 1.5px solid #e8e8e8; border-radius: 12px;
  padding: 10px 14px;
}

.stat-input-wrap:focus-within { border-color: #0a0a0a; background: #fff; }

.stat-input-label { font-size: 11px; color: #999; margin-bottom: 3px; }

.stat-input {
  width: 100%; border: none; outline: none;
  font-size: 16px; font-weight: 600; font-family: inherit;
  background: transparent; color: #0a0a0a;
}

.stat-input::placeholder { color: #ccc; font-weight: 400; }

.mood-row { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }

.mood-btn {
  flex: 1; min-width: 70px; padding: 10px 6px;
  border: 1.5px solid #e0e0e0; border-radius: 12px;
  background: #fff; font-size: 18px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}

.mood-btn span { font-size: 10px; color: #999; }
.mood-btn:hover { border-color: #aaa; }
.mood-btn.selected { border-color: #0a0a0a; background: #0a0a0a; }
.mood-btn.selected span { color: #fff; }

.visibility-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.visibility-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 8px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.visibility-icon { font-size: 16px; line-height: 1; }

.visibility-btn:hover { border-color: #aaa; color: #0a0a0a; }
.visibility-btn.selected { border-color: #0a0a0a; background: #0a0a0a; color: #fff; }

.visibility-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.45;
  margin: 0 0 20px;
}

.media-row { display: flex; gap: 10px; margin-bottom: 12px; }

.media-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px;
  border: 1.5px solid #e0e0e0; background: #fff;
  font-size: 13px; font-weight: 500; color: #555;
  cursor: pointer; font-family: inherit;
}

.media-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.media-thumb {
  position: relative; width: 80px; height: 80px;
  border-radius: 10px; overflow: hidden;
  border: 0.5px solid #e8e8e8;
}

.media-thumb img { width: 100%; height: 100%; object-fit: cover; }

.media-thumb .remove-media {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
}

.post-btn {
  width: 100%; padding: 14px;
  background: #0a0a0a; color: #fff;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}

.post-btn:hover { background: #333; }
.post-btn:disabled { background: #ccc; cursor: not-allowed; }

.stats-card {
  background: #fff; border: 0.5px solid #ebebeb;
  border-radius: 16px; padding: 20px; margin-bottom: 16px;
}

.stats-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stats-tile {
  background: #f7f7f7; border: 0.5px solid #e8e8e8;
  border-radius: 12px; padding: 12px;
}

.stats-tile-val { font-size: 22px; font-weight: 700; color: #0a0a0a; }
.stats-tile-label { font-size: 11px; color: #999; margin-top: 2px; }

.stats-top-types {
  color: #666;
  font-size: 14px;
}

.stats-top-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
  color: inherit;
}

.stats-top-count {
  font-weight: 600;
  color: #0a0a0a;
}

.activity-history-link {
  font-size: 13px;
  color: #999;
  text-decoration: none;
}

.login-gate {
  padding: 40px 24px;
  text-align: center;
}

.login-gate p { color: #666; margin-bottom: 16px; line-height: 1.5; }