/* ============================================================
   MEKABO builder.css — the workshop UI
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: 320px 1fr 376px;
  grid-template-rows: 58px 1fr;
  grid-template-areas: "top top top" "left stage right";
  height: 100vh;
  overflow: hidden;
}

/* ---------------- TOP BAR ---------------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--hairline);
  z-index: 30;
}
.topbar .logo { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em;
  background: linear-gradient(180deg,#fff,#bcdcff 55%,#5a93d8 56%,#cfeaff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.topbar .tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-faint); text-transform: uppercase; }
.topbar .spacer { flex: 1; }

/* ---------------- RAIL (left + right) ---------------- */
.rail { background: var(--bg-1); overflow-y: auto; overflow-x: hidden; }
.rail::-webkit-scrollbar { width: 10px; }
.rail::-webkit-scrollbar-thumb { background: #2a3148; border-radius: 5px; border: 2px solid var(--bg-1); }
.left { grid-area: left; border-right: 1px solid var(--hairline); }
.right { grid-area: right; border-left: 1px solid var(--hairline); padding: 18px; }

/* ---- tabs ---- */
.tabs { display: flex; position: sticky; top: 0; background: var(--bg-1); z-index: 5;
  border-bottom: 1px solid var(--hairline); }
.tab { flex: 1; padding: 12px 4px 10px; text-align: center; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 11px; color: var(--ink-faint); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tab:hover { color: var(--ink-dim); }
.tab.active { color: var(--neon-cyan); border-bottom-color: var(--neon-cyan); }

.panel-pane { padding: 18px; display: none; }
.panel-pane.active { display: block; }
.grp { margin-bottom: 20px; }
.grp > .glabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.glabel .dice { margin-left: auto; cursor: pointer; color: var(--ink-dim); font-size: 13px;
  border: 1px solid var(--hairline-2); border-radius: 4px; padding: 1px 6px; }
.glabel .dice:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* chips (part / addon variants) */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  font-size: 12px; color: var(--ink-dim);
  background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 7px 11px; cursor: pointer; transition: all .12s; user-select: none;
}
.chip:hover { border-color: var(--hairline-2); color: var(--ink); }
.chip.sel { background: var(--bg-4); border-color: var(--neon-cyan); color: #fff;
  box-shadow: inset 0 0 0 1px var(--neon-cyan); }

/* sliders */
.slider-row { margin-bottom: 16px; }
.slider-row .sl-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; }
.slider-row .sl-top b { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.slider-row .sl-top .val { font-family: var(--font-mono); color: var(--neon-cyan); font-size: 11px; }
input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), #2a3148); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 4px;
  background: #fff; border: 2px solid var(--neon-cyan); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.4); }

/* color swatches */
.pal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.pal {
  height: 40px; border-radius: 6px; cursor: pointer; overflow: hidden; display: flex;
  border: 1px solid var(--hairline); transition: transform .1s, box-shadow .12s;
}
.pal:hover { transform: translateY(-1px); }
.pal.sel { box-shadow: 0 0 0 2px var(--neon-cyan); }
.pal span { flex: 1; }
.color-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.color-row .clabel { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 11px;
  letter-spacing: .04em; color: var(--ink-dim); width: 74px; }
.sw-row { display: flex; gap: 6px; flex: 1; }
.sw { width: 24px; height: 24px; border-radius: 5px; cursor: pointer; border: 1px solid var(--hairline); }
.sw.sel { box-shadow: 0 0 0 2px var(--neon-cyan); }
.sw.custom { display: grid; place-items: center; position: relative; overflow: hidden;
  background: conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red); }
.sw.custom input { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }

/* alt-mode cards */
.alt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.alt-card { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid var(--hairline); cursor: pointer; transition: all .12s; }
.alt-card:hover { border-color: var(--hairline-2); }
.alt-card.sel { border-color: var(--neon-cyan); background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--neon-cyan); }
.alt-card .ico { font-size: 20px; line-height: 1; }
.alt-card .nm { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: .02em; color: var(--ink); line-height: 1.1; }
.alt-card .tg { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-faint); letter-spacing: .08em; }

/* alt category picker (two-step) */
.alt-cat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.alt-cat { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--hairline); cursor: pointer; transition: all .12s; }
.alt-cat:hover { border-color: var(--hairline-2); }
.alt-cat.sel { border-color: var(--neon-cyan); background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--neon-cyan); }
.alt-cat .ico { font-size: 15px; line-height: 1; }
.alt-cat .cl { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 10px;
  letter-spacing: .03em; color: var(--ink); }
.alt-cat .cn { font-family: var(--font-mono); font-size: 8.5px; color: var(--neon-cyan);
  background: rgba(60,200,255,.14); border-radius: 999px; padding: 1px 5px; }

/* alt variant cards (with silhouette preview) */
.alt-grid.var { grid-template-columns: repeat(3, 1fr); }
.alt-card.var { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px; }
.alt-card.var .silo { background: #0a0c14; border-radius: 5px; height: 52px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.alt-card.var .silo svg { width: 100%; height: 100%; display: block; }
.alt-card.var .meta { display: flex; flex-direction: column; gap: 1px; }

/* identity form */
.field { margin-bottom: 14px; }
.field .flabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px; display: flex; align-items: center; }
.field .flabel .dice { margin-left: auto; }
.field input, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 6px;
  color: var(--ink); font-family: var(--font-body); font-size: 14px; padding: 9px 11px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--neon-cyan); }
.field textarea { min-height: 76px; line-height: 1.45; }
.fac-toggle { display: flex; gap: 8px; }
.fac-btn { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid var(--hairline); cursor: pointer; }
.fac-btn .nm { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 14px; }
.fac-btn.sel.mei { border-color: var(--mei-2); box-shadow: inset 0 0 0 1px var(--mei-2); }
.fac-btn.sel.kur { border-color: var(--kur-3); box-shadow: inset 0 0 0 1px var(--kur-3); }

/* ---------------- STAGE ---------------- */
.stage { grid-area: stage; position: relative; display: flex; flex-direction: column;
  background: radial-gradient(130% 90% at 50% 8%, #141a2e 0%, #07080d 70%); overflow: hidden; }
.view-pills { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 4px; background: rgba(10,12,20,.7); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); border-radius: 9px; padding: 4px; }
.view-pill { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; color: var(--ink-faint); padding: 7px 14px; border-radius: 6px; cursor: pointer; }
.view-pill:hover { color: var(--ink-dim); }
.view-pill.active { background: var(--bg-3); color: var(--neon-cyan); }

.stage-area { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; }
.stage-grid { position: absolute; left: -30%; right: -30%; bottom: 0; height: 48%;
  background-image: linear-gradient(to right, var(--grid-cyan) 1px, transparent 1px),
    linear-gradient(to top, var(--grid-cyan) 1px, transparent 1px);
  background-size: 46px 46px; transform: perspective(440px) rotateX(65deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top,#000,transparent 90%); mask-image: linear-gradient(to top,#000,transparent 90%); }
#stage-2d, #stage-3d { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; }
#stage-3d { display: none; }
.stage .mk-robot, .stage .mk-alt { width: min(86%, 440px); height: 90%; }
.alt-badge { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--neon-cyan);
  border: 1px solid var(--hairline-2); border-radius: 20px; padding: 5px 14px; background: rgba(10,12,20,.6); }

/* action bar */
.action-bar { position: relative; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; }
.transform-btn {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  font-size: 17px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ffce4a, #f4960f); color: #2a1500;
  border: none; border-radius: 9px; padding: 14px 30px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 0 #b05f08, 0 10px 22px rgba(244,150,15,.4);
  transition: transform .08s, box-shadow .08s;
}
.transform-btn:hover { filter: brightness(1.06); }
.transform-btn:active { transform: translateY(4px); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 0 #b05f08; }
.ghost-btn { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; color: var(--ink-dim); background: var(--bg-2); border: 1px solid var(--hairline-2);
  border-radius: 7px; padding: 11px 15px; cursor: pointer; }
.ghost-btn:hover { border-color: var(--neon-cyan); color: var(--ink); }

/* transform flourish overlay */
.flourish { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; opacity: 0; }
.flourish.go { animation: fl-fade .95s ease forwards; }
.flourish .flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff, rgba(255,255,255,0) 42%); opacity: 0; }
.flourish.go .flash { animation: fl-flash .5s ease; }
.flourish .lines { position: absolute; width: 140%; height: 140%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.0) 0deg 7deg, rgba(120,210,255,.5) 7deg 8deg);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 66%);
          mask-image: radial-gradient(circle, transparent 30%, #000 42%, #000 60%, transparent 66%);
  opacity: 0; transform: scale(.4); }
.flourish.go .lines { animation: fl-lines .7s ease-out; }
.flourish .word { position: relative; z-index: 2; font-family: var(--font-display); font-size: 60px;
  color: #fff; -webkit-text-stroke: 3px #0c0d14; text-shadow: 5px 5px 0 var(--mei-1); transform: scale(.3) rotate(-8deg); opacity: 0; }
.flourish.go .word { animation: fl-word .8s cubic-bezier(.2,1.4,.4,1); }
@keyframes fl-fade { 0%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
@keyframes fl-flash { 0%{opacity:0} 30%{opacity:.9} 100%{opacity:0} }
@keyframes fl-lines { 0%{opacity:0;transform:scale(.4) rotate(0)} 40%{opacity:.9} 100%{opacity:0;transform:scale(1.3) rotate(40deg)} }
@keyframes fl-word { 0%{opacity:0;transform:scale(.2) rotate(-12deg)} 45%{opacity:1;transform:scale(1.1) rotate(-6deg)} 75%{opacity:1;transform:scale(1) rotate(-6deg)} 100%{opacity:0;transform:scale(1.15) rotate(-4deg)} }

/* spin/shake on the robot during transform */
.tf-spin { animation: tf-spin .9s ease-in-out; }
@keyframes tf-spin { 0%{transform:scale(1)} 25%{transform:scale(.92) rotate(6deg)} 50%{transform:scale(.7) rotate(-340deg)} 75%{transform:scale(.92) rotate(-700deg)} 100%{transform:scale(1) rotate(-720deg)} }

/* ---------------- RIGHT: card + actions ---------------- */
.right .right-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 12px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.act { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 12px; color: var(--ink); background: var(--bg-3); border: 1px solid var(--hairline-2);
  border-radius: 7px; padding: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.act:hover { border-color: var(--neon-cyan); background: var(--bg-4); }
.act.primary { background: var(--mei-1); border-color: #ff6a5e; color: #fff; grid-column: 1 / -1; }
.act.primary:hover { filter: brightness(1.08); background: var(--mei-1); }

/* ---------------- TECH-SPEC CARD ---------------- */
.tspec {
  width: 100%;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 2px, transparent 2px 4px), var(--paper);
  color: var(--paper-ink); border-radius: 8px; border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-hard); overflow: hidden;
}
.tspec-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #fff; }
.tspec-top .ttl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; opacity: .92; }
.tspec-top .fn { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 15px;
  letter-spacing: .03em; margin-left: auto; text-align: right; }
.tspec-name { font-family: var(--font-display); font-size: 38px; line-height: .9; padding: 13px 16px 2px;
  color: var(--paper-ink); letter-spacing: .02em; word-break: break-word; }
.tspec-body { display: grid; grid-template-columns: 142px 1fr; gap: 12px; padding: 6px 16px 12px; }
.tspec-art { position: relative; background: linear-gradient(180deg,#0c1426,#0a0f1d); border: 2px solid var(--paper-ink);
  border-radius: 4px; overflow: hidden; height: 176px; }
.tspec-art .ag { position: absolute; left: -30%; right: -30%; bottom: 0; height: 52%;
  background-image: linear-gradient(to right, rgba(60,200,255,.25) 1px, transparent 1px),
    linear-gradient(to top, rgba(60,200,255,.25) 1px, transparent 1px); background-size: 22px 22px;
  transform: perspective(260px) rotateX(66deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top,#000,transparent); mask-image: linear-gradient(to top,#000,transparent); }
.tspec-art .mk-robot { position: relative; width: 100%; height: 100%; z-index: 2; }
.tspec-side { display: flex; flex-direction: column; }
.tspec-motto { font-style: italic; font-size: 12.5px; line-height: 1.35; color: #3a2406;
  border-left: 3px solid var(--mei-1); padding-left: 9px; margin-bottom: 9px; }
.tspec-bio { font-size: 11px; line-height: 1.4; color: #2a2418; }
.tspec-stats { padding: 2px 16px 14px; }
.tspec-stats .sh { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: #6a5b3a;
  margin: 4px 0 8px; display: flex; justify-content: space-between; }
.stat { display: grid; grid-template-columns: 76px 1fr 20px; align-items: center; gap: 8px; margin-bottom: 5px; }
.stat .nm { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; }
.stat .bar { display: flex; gap: 2px; cursor: pointer; }
.stat .cell { height: 11px; flex: 1; border: 1px solid #c0b287; transition: background .08s; }
.stat .vv { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.tspec-foot { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--paper-ink); color: var(--paper-2); }
.tspec-foot .mk { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; color: var(--paper); }
.tspec-foot .alt { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; }
.tspec-foot .sn { font-family: var(--font-mono); font-size: 8.5px; opacity: .6; margin-left: auto; }

/* ---------------- GALLERY MODAL ---------------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(5,6,11,.78); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 30px; }
.modal.open { display: flex; }
.modal-box { background: var(--bg-1); border: 1px solid var(--hairline-2); border-radius: 12px; width: min(960px, 96vw);
  max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.modal-head h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; margin: 0; letter-spacing: .03em; }
.modal-head .x { margin-left: auto; cursor: pointer; color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 0 6px; }
.modal-head .x:hover { color: var(--ink); }
.roster { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.roster-empty { color: var(--ink-faint); padding: 40px; text-align: center; grid-column: 1/-1; font-size: 14px; }
.rcard { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 9px; overflow: hidden; cursor: pointer; transition: border-color .12s, transform .1s; }
.rcard:hover { border-color: var(--neon-cyan); transform: translateY(-2px); }
.rcard .rart { height: 150px; background: radial-gradient(120% 90% at 50% 16%, #18203a, #090b12); display: grid; place-items: center; }
.rcard .rart .mk-robot { width: 80%; height: 92%; }
.rcard .rinfo { padding: 9px 11px; }
.rcard .rname { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 14px; }
.rcard .rfn { font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); letter-spacing: .06em; }
.rcard .rbar { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-top: 1px solid var(--hairline); }
.rcard .rbar .del { margin-left: auto; color: var(--ink-faint); cursor: pointer; font-size: 12px; }
.rcard .rbar .del:hover { color: var(--mei-1); }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); border: 1px solid var(--neon-cyan); color: var(--ink); padding: 12px 20px; border-radius: 8px;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }