* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: #251d17;
  background: #d9d2c5;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
select,
input,
textarea,
a {
  font: inherit;
}

button,
select,
a {
  cursor: pointer;
}

.tuner-app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 72px;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #a99b88;
  background: #f4f0e8;
}

.topbar h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
}

.topbar p {
  margin: 5px 0 0;
  color: #71675c;
  font-size: 13px;
  font-weight: 700;
}

.top-actions,
.inspector-actions,
.code-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #ab9b86;
  border-radius: 6px;
  color: #413528;
  background: #fffaf0;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(48, 35, 22, 0.12);
}

.button.primary {
  border-color: #087e70;
  color: #fff;
  background: #0b9b8b;
}

.button.danger {
  border-color: #aa6c59;
  color: #7d2f1f;
  background: #fff1e9;
}

.workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 250px minmax(480px, 1fr) 320px;
}

.element-panel,
.inspector-panel {
  min-height: 0;
  background: #eee9df;
}

.element-panel {
  border-right: 1px solid #b8aa98;
}

.inspector-panel {
  padding: 14px;
  overflow-y: auto;
  border-left: 1px solid #b8aa98;
}

.panel-heading {
  height: 49px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c7bcad;
  background: #f7f3ec;
}

.panel-heading span {
  color: #817568;
  font-size: 12px;
}

.element-list {
  height: calc(100% - 49px);
  padding: 8px;
  overflow-y: auto;
}

.element-group-title {
  margin: 10px 6px 5px;
  color: #887664;
  font-size: 11px;
  font-weight: 900;
}

.element-button {
  width: 100%;
  min-height: 34px;
  margin-bottom: 3px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #42372d;
  background: transparent;
  text-align: left;
}

.element-button:hover {
  background: #fffaf1;
}

.element-button.selected {
  border-color: #0b8f81;
  background: #dff4ee;
}

.element-button.changed::after {
  content: "已调整";
  order: 3;
  color: #0b8477;
  font-size: 10px;
  font-weight: 900;
}

.element-button.temp-hidden::before {
  content: "已隐藏";
  order: 2;
  margin-left: auto;
  color: #a14a32;
  font-size: 10px;
  font-weight: 900;
}

.preview-area {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #2a2722;
}

.preview-toolbar {
  min-height: 49px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #ece4d6;
  background: #39342d;
}

.preview-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.preview-toolbar select {
  height: 32px;
  padding: 4px 28px 4px 9px;
  border: 1px solid #70665a;
  border-radius: 5px;
  color: #f6efe3;
  background: #4c463e;
}

#mode-hint {
  color: #d1c5b4;
  font-size: 12px;
  font-weight: 750;
}

.preview-stage {
  min-height: 0;
  flex: 1;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(45deg, #2d2924 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(45deg, transparent 75%, #2d2924 75%) 0 0 / 18px 18px,
    #24211d;
}

.viewport-shell {
  position: relative;
}

.preview-viewport {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: left top;
  border: 1px solid #8f8374;
  background: #10282b;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.preview-viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #10282b;
}

.selected-block {
  padding-bottom: 12px;
  border-bottom: 1px solid #c9beaf;
}

.selected-block span,
.selected-block small {
  display: block;
}

.selected-block span {
  color: #7b6b5a;
  font-size: 11px;
  font-weight: 900;
}

.selected-block strong {
  display: block;
  margin: 4px 0;
  font-size: 21px;
}

.selected-block small {
  color: #81766a;
  font-size: 11px;
}

.direction-pad {
  margin: 14px auto 5px;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  grid-template-areas:
    ". up ."
    "left center right"
    ". down .";
  justify-content: center;
  gap: 4px;
}

.direction-pad button {
  width: 42px;
  height: 34px;
  border: 1px solid #b4a693;
  border-radius: 5px;
  color: #4c4033;
  background: #fffaf0;
  font-size: 18px;
  font-weight: 900;
}

.direction-pad button[data-nudge-y="-1"] { grid-area: up; }
.direction-pad button[data-nudge-x="-1"] { grid-area: left; }
.direction-pad button[data-nudge-reset] { grid-area: center; }
.direction-pad button[data-nudge-x="1"] { grid-area: right; }
.direction-pad button[data-nudge-y="1"] { grid-area: down; }

.keyboard-tip {
  margin: 0 0 13px;
  color: #807467;
  font-size: 11px;
  text-align: center;
}

.control-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-row {
  display: grid;
  grid-template-columns: 72px 1fr 61px;
  align-items: center;
  gap: 7px;
}

.control-row span {
  font-size: 12px;
  font-weight: 850;
}

.control-row input[type="range"] {
  min-width: 0;
  accent-color: #0b9183;
}

.control-row input[type="number"] {
  width: 61px;
  height: 30px;
  padding: 3px 5px;
  border: 1px solid #b7aa99;
  border-radius: 4px;
  background: #fffdf8;
  text-align: right;
}

.hidden {
  display: none !important;
}

.effect-controls {
  margin-top: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #9f8c73;
  border-radius: 6px;
  background: #e3dbcd;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}

.effect-controls-heading,
.effect-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.effect-controls-heading strong,
.effect-select-row span {
  font-size: 12px;
  font-weight: 900;
}

.effect-select-row select {
  width: 128px;
  height: 31px;
  padding: 3px 8px;
  border: 1px solid #a9957c;
  border-radius: 5px;
  color: #352a20;
  background: #fffaf0;
  font-weight: 850;
}

.button.compact {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12px;
}

.effect-tip {
  margin: -2px 0 0;
  color: #655746;
  font-size: 11px;
  line-height: 1.45;
}

.inspector-actions {
  margin: 13px 0 14px;
}

.inspector-actions .button {
  flex: 1;
}

.visibility-actions {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 7px;
  margin-bottom: 5px;
}

.button.visibility {
  border-color: #8b745c;
  color: #fff8e8;
  background: #675442;
}

.visibility-tip {
  margin: 0 0 14px;
  color: #827568;
  font-size: 11px;
  line-height: 1.4;
}

.code-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 900;
}

#parameter-code {
  width: 100%;
  height: 168px;
  padding: 9px;
  resize: vertical;
  border: 1px solid #aa9d8c;
  border-radius: 5px;
  color: #2e2924;
  background: #fffdf8;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.code-actions {
  margin-top: 7px;
}

.code-actions .button {
  width: 100%;
}

.status {
  min-height: 20px;
  margin-top: 7px;
  color: #08796e;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 210px minmax(430px, 1fr) 285px;
  }
}