html {
  min-height: 100%;
  background: #080b12;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #080b12 !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
main { padding-bottom: 40px; }
.balance-setting {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0e141f;
}
.balance-setting label { min-width: 220px; }
.balance-setting input { font-size: 18px; font-weight: 800; }
.metrics { grid-template-columns: repeat(4, 1fr); }
.metric-detail {
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paste-zone.active {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px #9b8cff22;
}
.image-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  padding: 7px;
}
.image-previews:empty { display: none; }
.image-preview { position: relative; min-width: 0; }
.paste-zone .image-preview img {
  display: block;
  width: 100%;
  height: 105px;
  border-radius: 7px;
  object-fit: cover;
  background: #060911;
}
.image-preview small {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 99px;
  background: #080b12dd;
  color: white;
  text-align: center;
}
.choose-images { width: 100%; }
.row-actions { display: flex; gap: 7px; }
.row-actions .danger { margin-right: 0; }
.filters { flex-wrap: wrap; justify-content: flex-end; }
.filters > select { width: auto; min-width: 145px; flex: 0 0 auto; }
.compact-filter { gap: 3px; color: var(--muted); }
.compact-filter input { min-width: 138px; padding: 9px; }
#saveTrade { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; }
#saveTrade:disabled { cursor: wait; opacity: .78; }
.button-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid #ffffff66;
  border-top-color: #fff;
  border-radius: 50%;
  animation: save-spin .7s linear infinite;
}
#saveTrade.saving .button-spinner { display: inline-block; }
@keyframes save-spin { to { transform: rotate(360deg); } }
.saved-image { border: 1px solid #4de1aa55; border-radius: 8px; }
.saved-image small { color: var(--green); }
.image-preview img { cursor: zoom-in; }
.remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border-color: #ff718899;
  border-radius: 50%;
  background: #080b12dd;
  color: #ff9cab;
  font-size: 19px;
  line-height: 1;
}
#imageViewer {
  width: min(96vw, 1500px);
  height: min(94vh, 1000px);
  padding: 10px;
  overflow: hidden;
  background: #05070c;
}
.drawing-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  overflow-x: auto;
  padding-bottom: 7px;
}
.drawing-toolbar button { padding: 8px 11px; white-space: nowrap; }
.drawing-toolbar button.active { border-color: var(--purple); background: #322a59; }
.drawing-toolbar label { flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; }
.drawing-toolbar input[type="color"] { width: 40px; height: 34px; padding: 3px; }
.drawing-toolbar input[type="range"] { width: 100px; padding: 0; }
.canvas-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100% - 48px);
  overflow: auto;
  background: #020306;
}
#drawingCanvas {
  display: block;
  max-width: none;
  max-height: none;
  cursor: crosshair;
  touch-action: none;
  object-fit: contain;
}
#closeImageViewer { margin-left: auto; }
/* Keep toolbar controls compact inside the full-screen editor. */
#imageViewer .primary {
  background: linear-gradient(135deg,#765ee9,#997df4);
}
/* Legacy viewer image rule intentionally removed; annotations render on canvas. */
#imageViewer canvas {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
#zoomLevel { min-width: 42px; color: var(--muted); text-align: center; }
#editorLoading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  inset: 48px 0 0;
  color: var(--muted);
  background: #020306;
}
#editorLoading.show { display: flex; }
#editorLoading .button-spinner { display: inline-block; }
.simple-viewer { padding: 46px 12px 12px !important; }
.simple-viewer #viewImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.simple-viewer #closeImageViewer {
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
}
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .balance-setting { align-items: stretch; flex-direction: column; }
  .metrics { grid-template-columns: 1fr; }
}