.synthetic-shell { max-width: 1000px; margin: 0 auto 4rem; padding: 0 20px; display: grid; gap: 24px; }
.synthetic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.synthetic-shell label { display: flex; flex-direction: column; gap: 8px; }
.synthetic-shell input, .synthetic-shell select, .synthetic-shell textarea { width: 100%; min-width: 0; }
.synthetic-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 22px 0; }
.synthetic-tiles { display: flex; flex-wrap: wrap; gap: 3px; margin: 14px 0; }
.synthetic-tiles img { width: clamp(20px, 5.2vw, 42px); height: auto; }
.synthetic-tiles img.tsumogiri { opacity: .55; }
.synthetic-shell details { margin-top: 20px; }
.synthetic-shell summary { cursor: pointer; }
.synthetic-shell pre { max-height: 400px; overflow: auto; }
.synthetic-shell [hidden] { display: none; }
#status[data-error="true"] { color: var(--danger); }
@media (max-width: 600px) { .synthetic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .synthetic-shell { padding: 0 12px; } }
.synthetic-shell h2 { margin: 22px 0 10px; }
#synthetic-form > label + label { margin-top: 12px; }
.synthetic-tiles .mj-tile { width: 38px; height: 52px; flex: 0 0 auto; }
.synthetic-tiles .mj-tile img { width: 100%; height: 100%; object-fit: contain; }
.synthetic-meld { display: flex; align-items: center; gap: 3px; padding: 8px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.synthetic-meld > span:first-child { font-size: 12px; margin-right: 5px; }
.synthetic-call-tile { transform: rotate(90deg); margin: 0 7px; }
#tile-picker { width: min(620px, calc(100vw - 24px)); max-height: 90dvh; overflow: auto; background: var(--felt-deep); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
#tile-picker::backdrop { background: rgba(0,0,0,.6); }
#tile-picker [hidden] { display: none; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-heading h2 { font-size: 20px; }
.picker-tile-row { display: flex; gap: 4px; margin: 10px 0; }
.picker-tile-row .mj-tile { flex: 1 1 0; min-width: 0; width: 38px; max-width: 46px; height: auto; aspect-ratio: 3/4; }
.picker-tile-row .mj-tile:disabled { opacity: .25; cursor: not-allowed; }
#meld-settings label { display: inline-flex; flex-direction: column; gap: 6px; margin-right: 12px; }
@media (max-width: 600px) { .synthetic-tiles .mj-tile { width: 30px; height: 42px; } #tile-picker { padding: 12px; } .picker-tile-row { gap: 2px; } }