* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  background: #f4f5fa;
  color: #222;
}

.teacher-app {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 14px 40px;
}

.topbar h1 { margin: 0; }
.topbar p { margin-top: 8px; color: #5a6072; }

.controls {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.btn.primary { background: #0f8a46; }
.btn.warning { background: #ff9800; }
.btn.danger { background: #e53935; }
.btn.full { width: 100%; margin-top: 10px; }

.stats {
  margin-top: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #e8e9f1;
}

.artworks-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.art-card {
  background: #fff;
  border: 1px solid #e8e9f1;
  border-radius: 12px;
  overflow: hidden;
}
.art-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.art-card .meta {
  padding: 10px;
  display: grid;
  gap: 8px;
}
.art-card .name {
  font-weight: 700;
}
.toggle-btn {
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-weight: 700;
  cursor: pointer;
}
.toggle-btn.hide { background: #ffe8e8; color: #b01f1b; }
.toggle-btn.show { background: #e9f5e8; color: #166c1f; }

.pin-modal {
  position: fixed;
  inset: 0;
  background: rgba(12, 16, 30, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
}
.pin-modal.show { display: flex; }
.pin-card {
  background: #fff;
  border-radius: 14px;
  width: min(360px, 92vw);
  padding: 20px;
}
.pin-card input {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #cfd3e6;
  border-radius: 10px;
  padding: 10px;
  font-size: 1rem;
}
.pin-card .note {
  color: #6a6f80;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr; }
}