/* Curved Cup Label Designer — styles */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #eceff1;
  color: #263238;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #263238;
  color: #fff;
}
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
nav .tab {
  background: transparent;
  border: 1px solid #546e7a;
  color: #cfd8dc;
  padding: 6px 16px;
  margin-left: 6px;
  border-radius: 6px;
  cursor: pointer;
}
nav .tab.active { background: #0288d1; border-color: #0288d1; color: #fff; }

main { display: flex; padding: 14px; gap: 14px; }

/* ---- toolbar ---- */
#toolbar {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.group {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.group h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; color: #78909c; }
.hint { font-size: 12px; color: #78909c; line-height: 1.4; }
.check { font-size: 13px; display: flex; gap: 6px; align-items: center; }

.btn {
  display: inline-block;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid #b0bec5;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #263238;
  text-decoration: none;
}
.btn:hover { background: #f5f5f5; }
.btn.small { padding: 5px 8px; font-size: 13px; }
.btn.big { padding: 12px; font-size: 15px; }
.btn.primary { background: #0288d1; border-color: #0288d1; color: #fff; }
.btn.primary:hover { background: #0277bd; }
.btn.success { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.btn.success:hover { background: #1b5e20; }
.btn.danger { background: #c62828; border-color: #c62828; color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- canvas ---- */
#canvasWrap {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 70vh;
}
#editorCanvas {
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid #cfd8dc;
  cursor: default;
  touch-action: none;
}
#canvasWrap.dragover { outline: 3px dashed #0288d1; }

/* ---- history ---- */
#historyView { flex-direction: column; }
#historyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.histCard {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.histCard img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/16px 16px;
  cursor: pointer;
  display: block;
}
.histCard .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 12px;
  color: #546e7a;
}
.histCard .del {
  border: none;
  background: none;
  color: #c62828;
  cursor: pointer;
  font-size: 14px;
}

/* ---- viewer modal ---- */
#viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
#viewer[hidden] { display: none; }
#viewerBox {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#viewerImg {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/16px 16px;
}
#viewerBar { display: flex; gap: 10px; justify-content: flex-end; }