tabs/dojo.tab.css

#kimodo-dojo-toggle {
  display: block !important;
  color: #ffd28a;
}
#kimodo-dojo-toggle.active {
  background: #4a3320 !important;
  border-color: #b97736 !important;
  color: #ffe0ad !important;
}

.kimodo-dojo-label {
  display: block;
  margin: 10px 0 5px;
  font-size: 11px;
  color: #b8bec6;
}
.kimodo-dojo-mode {
  margin: 10px 0 8px;
  background: #201a16;
  border-color: #4a3320;
}
.kimodo-dojo-mode .kimodo-cz-segbtn {
  color: #b9905a !important;
}
.kimodo-dojo-mode .kimodo-cz-segbtn.active {
  background: #4a3320 !important;
  color: #ffe0ad !important;
}
.kimodo-dojo-settings {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid #34343c;
  border-radius: 7px;
  background: #202026;
}
.kimodo-dojo-range {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8bec6;
}
.kimodo-dojo-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #c4cad2;
}
.kimodo-dojo-check input {
  accent-color: #b97736;
}
.kimodo-dojo-range span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.kimodo-dojo-range output {
  color: #ffe0ad;
}
.kimodo-dojo-range input {
  width: 100%;
  accent-color: #b97736;
}
.kimodo-dojo-prompt {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  background: #1c1c22;
  color: #e3e3e8;
  border: 1px solid #3a3a40;
  border-radius: 6px;
}
.kimodo-dojo-prompt:focus {
  outline: none;
  border-color: #b97736;
}
.kimodo-dojo-presets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 8px 0 10px;
}
.kimodo-dojo-preset,
.kimodo-dojo-actions button {
  padding: 7px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  background: #34343a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  box-shadow: none !important;
}
.kimodo-dojo-preset:hover,
.kimodo-dojo-actions button:hover:not(:disabled) {
  background: #3f3f48 !important;
}
.kimodo-dojo-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 2px;
}
.kimodo-dojo-grid2 label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #b8bec6;
}
.kimodo-dojo-grid2 input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 7px;
  background: #1c1c22;
  color: #e3e3e8;
  border: 1px solid #3a3a40;
  border-radius: 6px;
}
.kimodo-dojo-actions {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.kimodo-dojo-actions button {
  flex: 1;
}
.kimodo-dojo-actions .kimodo-dojo-primary {
  background: #4a3320 !important;
  color: #ffe0ad !important;
  border-color: #b97736 !important;
}
.kimodo-dojo-status {
  margin-top: 10px;
}
.kimodo-dojo-time,
.kimodo-dojo-detail {
  margin-top: 7px;
  min-height: 15px;
  font-size: 11px;
  line-height: 1.35;
  color: #aeb5be;
}
.kimodo-dojo-detail {
  color: #87909b;
}
.kimodo-dojo-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  background: #202026;
  border: 1px solid #34343c;
  border-radius: 7px;
}
.kimodo-dojo-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #7f8792;
}
.kimodo-dojo-step span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a4a52;
  flex: 0 0 auto;
}
.kimodo-dojo-step.active {
  color: #ffe0ad;
}
.kimodo-dojo-step.active span {
  background: conic-gradient(from 0deg, #ffd166, #8a642f, #ffd166);
  animation: kimodo-spin .9s linear infinite;
}
.kimodo-dojo-step.done {
  color: #9fe6c0;
}
.kimodo-dojo-step.done span {
  background: #49b978;
}
.kimodo-dojo-step.fail {
  color: #ff9a9a;
}
.kimodo-dojo-step.fail span {
  background: #d85d5d;
}
.kimodo-dojo-preview-wrap {
  display: none;
  margin-top: 9px;
  border: 1px solid #34343c;
  border-radius: 7px;
  overflow: hidden;
  background: #151519;
}
.kimodo-dojo-preview-wrap.on {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.kimodo-dojo-preview-wrap figure {
  margin: 0;
  position: relative;
  min-width: 0;
}
.kimodo-dojo-preview-wrap figcaption {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: #e9edf2;
  font-size: 9px;
  line-height: 1;
}
.kimodo-dojo-preview-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ============ Library / create restructure ============ */
.kimodo-dojo-view[hidden] { display: none; }

/* Mine|Community pill — dojo (amber) palette, NOT the purple My Karate one. */
.kimodo-dojo-seg { background: #201a16; border-color: #4a3320; }
.kimodo-dojo-seg .kimodo-cz-segbtn { color: #b9905a !important; }
.kimodo-dojo-seg .kimodo-cz-segbtn.active { background: #4a3320 !important; color: #ffe0ad !important; }

/* "＋ Add dojo" — same dashed-outline style as "＋ Add a stance", dojo colors. */
.kimodo-dojo-addbtn {
  display: block;
  width: 100%;
  padding: 11px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9px;
  background: #4a3320 !important;
  color: #ffe0ad !important;
  border: 1px dashed #b97736 !important;
  box-shadow: none !important;
}
.kimodo-dojo-addbtn:hover { background: #5a3f27 !important; }
.kimodo-dojo-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kimodo-dojo-card {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: #202026;
  border: 1px solid #34343c;
}
.kimodo-dojo-card:hover { border-color: #b97736; }
.kimodo-dojo-card .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #15151a;
}
.kimodo-dojo-card .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 26px;
  color: #6a5a3a;
  background: #1b1b20;
}
.kimodo-dojo-card .nm {
  padding: 5px 7px;
  font-size: 10.5px;
  line-height: 1.25;
  color: #d7d3c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kimodo-dojo-card .badge {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(0, 0, 0, 0.6);
  color: #ffd28a;
}
.kimodo-dojo-card .del {
  position: absolute;
  top: 4px;
  right: 5px;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: #ccc !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 0 !important;
  border-radius: 5px;
  box-shadow: none !important;
}
.kimodo-dojo-card .del:hover { color: #ff9a9a !important; }
.kimodo-dojo-empty {
  margin-top: 12px;
  text-align: center;
  color: #87909b;
}
/* Back to the dojo list — arrow only, like My Karate's ‹ back. */
.kimodo-dojo-back {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffd28a !important;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px 6px 2px;
}
.kimodo-dojo-back:hover { color: #ffe0ad !important; }

/* "Describe the dojo" heading row with a right-anchored erase icon. */
.kimodo-dojo-promptrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 5px;
}
.kimodo-dojo-promptrow .kimodo-dojo-label { margin: 0; }
.kimodo-dojo-erase {
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #b9905a !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.kimodo-dojo-erase:hover { color: #ffd28a !important; }

.kimodo-dojo-improve {
  width: 100%;
  margin: 7px 0 4px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  background: #33271a !important;
  color: #ffd28a !important;
  border: 1px solid #7a5424 !important;
  box-shadow: none !important;
}
.kimodo-dojo-improve:hover:not(:disabled) { background: #3f3020 !important; }
.kimodo-dojo-improve:disabled { opacity: .55; cursor: default; }
.kimodo-dojo-adv {
  margin: 8px 0;
  border: 1px solid #34343c;
  border-radius: 7px;
  background: #1d1d22;
  overflow: hidden;
}
.kimodo-dojo-adv > summary {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #b8bec6;
  cursor: pointer;
  list-style: none;
}
.kimodo-dojo-adv > summary::-webkit-details-marker { display: none; }
.kimodo-dojo-adv > summary::after { content: " ▾"; color: #7f8792; }
.kimodo-dojo-adv[open] > summary::after { content: " ▴"; }
.kimodo-dojo-adv-body { padding: 0 10px 8px; }
.kimodo-dojo-adv-body .kimodo-dojo-mode { margin-top: 2px; }

/* ===== Panorama disabled for now: hide its controls ===== */
.kimodo-dojo-panoctl { display: none !important; }

/* ===== Generation stage: flux iso image + 3D-conversion effect ===== */
.kimodo-dojo-stage { margin-top: 10px; }
.kimodo-dojo-iso {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #15151a;
  border: 1px solid #34343c;
}
.kimodo-dojo-iso.generating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #1b1b20 30%, #2a2620 50%, #1b1b20 70%);
  background-size: 220% 100%;
  animation: kimodo-dojo-shimmer 1.3s linear infinite;
}
.kimodo-dojo-iso-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(14px);
  transition: opacity .9s ease, filter .9s ease, transform .9s ease;
}
.kimodo-dojo-iso.has-img .kimodo-dojo-iso-img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.kimodo-dojo-iso-scan,
.kimodo-dojo-iso-3d {
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.kimodo-dojo-iso.converting .kimodo-dojo-iso-scan,
.kimodo-dojo-iso.converting .kimodo-dojo-iso-3d { opacity: 1; }
.kimodo-dojo-iso-scan {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,210,138,0.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, transparent 0%, rgba(255,210,138,0.55) 50%, transparent 100%);
  background-size: 100% 100%, 100% 22%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 -22%;
  mix-blend-mode: screen;
}
.kimodo-dojo-iso.converting .kimodo-dojo-iso-scan { animation: kimodo-dojo-scan 1.6s ease-in-out infinite; }
.kimodo-dojo-iso-3d {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffe0ad;
  background: linear-gradient(0deg, rgba(0,0,0,0.62), transparent);
}
@keyframes kimodo-dojo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes kimodo-dojo-scan {
  0% { background-position: 0 0, 0 -22%; }
  100% { background-position: 0 0, 0 122%; }
}

/* Improve/reroll button loading state (matches move-gen green loader). */
.kimodo-dojo-improve.loading { background: #243a2c !important; color: #8fcaa6 !important; border-color: #2f5a3e !important; }

/* Save-to-dataset button (appears after a successful generation). */
.kimodo-dojo-save {
  display: block;
  width: 100%;
  margin: 8px 0 2px;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  background: #243a2c !important;
  color: #9fe6c0 !important;
  border: 1px solid #2f5a3e !important;
  box-shadow: none !important;
}
.kimodo-dojo-save[hidden] { display: none; }
.kimodo-dojo-save:hover:not(:disabled) { background: #2c4836 !important; }
.kimodo-dojo-save:disabled { opacity: .6; cursor: default; }

/* Contributor attribution on a community card (replaces the old SPLAT badge). */
.kimodo-dojo-card .by {
  padding: 0 7px 5px;
  font-size: 9px;
  color: #8a7a5a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "No dojo" card (first in the grid) — clears the scene, back to the grid floor. */
.kimodo-dojo-clearcard { background: #1a1a1f; border-style: dashed; border-color: #44444c; }
.kimodo-dojo-clearcard:hover { border-color: #6a6a72; }
.kimodo-dojo-clearcard .ph { color: #7a7a84; background: transparent; }
.kimodo-dojo-clearcard .nm { color: #9aa0aa; }