#fudai-detail-decoration-admin-host {
  display: none;
  min-height: calc(100vh - 64px);
  padding: 20px;
  background: #f5f7fa;
  color: #252a33;
  font-size: 14px;
  box-sizing: border-box;
}

#fudai-detail-decoration-admin-host *,
#fudai-detail-decoration-admin-host *::before,
#fudai-detail-decoration-admin-host *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

#fudai-detail-decoration-entry {
  margin: 12px 16px;
  padding: 14px 16px;
  border: 1px solid #dce5f2;
  border-radius: 5px;
  background: #f8faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  letter-spacing: 0;
}
.fd-entry-copy { min-width: 250px; display: flex; align-items: center; gap: 11px; }
.fd-entry-copy > span {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: #20242c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.fd-entry-copy strong, .fd-entry-copy small { display: block; letter-spacing: 0; }
.fd-entry-copy strong { color: #202532; font-size: 14px; }
.fd-entry-copy small { margin-top: 3px; color: #8b929e; font-size: 11px; }
#fudai-detail-decoration-entry > button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #1677ff;
  border-radius: 4px;
  background: #1677ff;
  color: #fff;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  cursor: pointer;
}
#fudai-detail-decoration-entry > button:hover { background: #0958d9; border-color: #0958d9; }

.fd-shell {
  width: min(1520px, 100%);
  min-height: calc(100vh - 104px);
  margin: 0 auto;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e5e6eb;
  color: #252a33;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fd-head {
  min-height: 62px;
  padding: 0 22px;
  border-bottom: 1px solid #e7e9ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.fd-head > div:first-child > span { color: #8b929e; display: block; font-size: 10px; line-height: 14px; }
.fd-head h2 { margin: 1px 0 0; color: #20242c; font-size: 18px; line-height: 23px; font-weight: 600; letter-spacing: 0; }
.fd-head-actions { min-width: 0; display: flex; align-items: center; gap: 14px; }
.fd-status { max-width: 520px; color: #687284; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-status.success { color: #16853f; }
.fd-status.error { color: #cf1322; }
.fd-toolbar {
  min-height: 72px;
  padding: 10px 18px;
  border-bottom: 1px solid #e9ecf0;
  background: #fafbfc;
  display: flex;
  align-items: end;
  gap: 9px;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.fd-toolbar-divider { width: 1px; height: 38px; margin: 0 5px; background: #e1e5ea; flex: 0 0 auto; }
.fd-switch { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.fd-switch input, .fd-mini-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fd-switch > span, .fd-mini-switch > span {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: #b9c0cb;
  transition: background .18s ease;
  flex: 0 0 auto;
}
.fd-switch > span::after, .fd-mini-switch > span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .18s ease;
}
.fd-switch input:checked + span, .fd-mini-switch input:checked + span { background: #1677ff; }
.fd-switch input:checked + span::after, .fd-mini-switch input:checked + span::after { transform: translateX(13px); }
.fd-switch b { color: #4f5968; font-size: 12px; font-weight: 500; white-space: nowrap; }
.fd-switch.primary { align-self: center; }
.fd-switch.primary b { color: #20242c; font-size: 13px; font-weight: 600; }
.fd-compact-field { min-width: 105px; display: block; }
.fd-compact-field.grow { min-width: 220px; flex: 1 1 320px; }
.fd-compact-field.color { width: 126px; flex: 0 0 126px; }
.fd-compact-field > span { margin-bottom: 4px; color: #7a8493; display: block; font-size: 10px; line-height: 13px; }
.fd-compact-field input, .fd-compact-field select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9dee6;
  border-radius: 4px;
  background: #fff;
  color: #303744;
  outline: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  box-sizing: border-box;
}
.fd-compact-field input:focus, .fd-compact-field select:focus, .fd-field input:focus, .fd-field textarea:focus, .fd-field select:focus { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22, 119, 255, .1); }
.fd-color-control,
.fd-compact-field > .fd-color-control {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  color: inherit;
  line-height: normal;
}
.fd-color-control .fd-color-picker,
.fd-compact-field .fd-color-control .fd-color-picker {
  width: 38px;
  height: 36px;
  margin: 0;
  padding: 3px;
  border: 1px solid #d9dee6;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: #fff;
  cursor: pointer;
}
.fd-color-control.compact .fd-color-picker,
.fd-compact-field .fd-color-control.compact .fd-color-picker { height: 32px; }
.fd-color-control input[type="text"] {
  border-radius: 0 4px 4px 0;
}
.fd-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.fd-color-picker::-webkit-color-swatch { border: 0; border-radius: 2px; }
.fd-color-picker::-moz-color-swatch { border: 0; border-radius: 2px; }
.fd-upload-input { display: none; }
.fd-upload {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #cbd2dc;
  border-radius: 4px;
  background: #fff;
  color: #4d5868;
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.fd-upload:hover:not(:disabled) { border-color: #1677ff; color: #1677ff; }
.fd-upload:disabled { color: #a6adb8; cursor: wait; }

.fd-layout {
  min-height: 560px;
  height: calc(100vh - 238px);
  display: grid;
  grid-template-columns: 270px minmax(360px, 1fr) 390px;
  flex: 1 1 auto;
  overflow: hidden;
}
.fd-modules, .fd-inspector, .fd-preview { min-width: 0; min-height: 0; overflow-y: auto; box-sizing: border-box; }
.fd-modules { padding: 17px 14px; border-right: 1px solid #e7e9ed; background: #f7f8fa; }
.fd-inspector { padding: 20px 22px 28px; background: #fff; }
.fd-preview { padding: 17px 20px 24px; border-left: 1px solid #e7e9ed; background: #f4f6f8; }
.fd-column-title { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fd-column-title > span { color: #333b47; font-size: 13px; font-weight: 600; }
.fd-column-title > small { color: #98a0ac; font-size: 9px; text-align: right; }
.fd-module-list { display: grid; gap: 7px; }
.fd-module-item {
  min-height: 56px;
  padding: 7px 7px;
  border: 1px solid #dfe3e9;
  border-radius: 5px;
  background: #fff;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 30px 48px;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.fd-module-item:hover { border-color: #aab4c1; }
.fd-module-item.active { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22, 119, 255, .08); }
.fd-module-item.disabled { opacity: .68; }
.fd-module-item.dragging { opacity: .42; }
.fd-drag { color: #a3abb7; font-size: 13px; line-height: 18px; cursor: grab; user-select: none; }
.fd-drag:active { cursor: grabbing; }
.fd-module-select { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.fd-module-select strong, .fd-module-select small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-module-select strong { color: #303744; font-size: 12px; line-height: 18px; }
.fd-module-select small { margin-top: 1px; color: #929aa6; font-size: 9px; line-height: 14px; }
.fd-mini-switch { width: 30px; height: 17px; display: block; cursor: pointer; }
.fd-order-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.fd-order-buttons button {
  width: 22px;
  height: 26px;
  padding: 0;
  border: 1px solid #e0e4e9;
  border-radius: 3px;
  background: #f8f9fa;
  color: #697484;
  font-size: 12px;
  cursor: pointer;
}
.fd-order-buttons button:hover { border-color: #9abff0; background: #f2f7ff; color: #1677ff; }
.fd-fixed-note, .fd-protected-note {
  margin-top: 16px;
  padding: 11px 12px;
  border-left: 3px solid #aab4c1;
  background: #eef1f4;
  color: #626d7c;
  font-size: 10px;
  line-height: 17px;
}
.fd-fixed-note strong, .fd-fixed-note span, .fd-protected-note strong, .fd-protected-note span { display: block; }
.fd-fixed-note strong, .fd-protected-note strong { margin-bottom: 3px; color: #3e4754; font-size: 11px; }

.fd-inspector-head { min-height: 52px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #edf0f3; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.fd-inspector-head > div > span { color: #929aa6; display: block; font-size: 10px; }
.fd-inspector-head h3 { margin: 3px 0 0; color: #252b35; font-size: 17px; line-height: 22px; letter-spacing: 0; }
.fd-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.fd-field.wide { grid-column: 1 / -1; }
.fd-field { min-width: 0; display: block; }
.fd-field > span { margin-bottom: 6px; color: #657080; display: block; font-size: 11px; }
.fd-field input, .fd-field textarea, .fd-field select {
  width: 100%;
  border: 1px solid #d9dee6;
  border-radius: 4px;
  background: #fff;
  color: #252b35;
  outline: none;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  box-sizing: border-box;
}
.fd-field input, .fd-field select { height: 36px; padding: 0 10px; }
.fd-field > .fd-color-control {
  width: 100%;
  margin: 0;
  display: grid;
  color: inherit;
  font-size: inherit;
}
.fd-field textarea { min-height: 88px; padding: 9px 10px; line-height: 20px; resize: vertical; }
.fd-section-title { margin: 24px 0 13px; padding-bottom: 8px; border-bottom: 1px solid #edf0f3; color: #3c4552; font-size: 12px; font-weight: 600; }

.fd-phone {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 375 / 720;
  margin: 0 auto;
  padding: 9px;
  border: 1px solid #c7cdd6;
  border-radius: 28px;
  background: #171a20;
  box-shadow: 0 12px 30px rgba(29, 34, 42, .18);
  overflow: hidden;
  box-sizing: border-box;
}
.fd-phone-page {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #dcd2ff;
  background-size: 100% auto;
  background-position: top center;
  color: #222;
  overflow: hidden;
  box-sizing: border-box;
}
.fd-preview-status { position: absolute; top: 7px; left: 13px; z-index: 8; color: #20232a; font-size: 8px; font-weight: 700; }
.fd-preview-header { position: absolute; top: 20px; left: 0; right: 0; z-index: 7; height: 31px; padding: 0 10px; display: grid; grid-template-columns: 24px 1fr 1fr 1fr; align-items: center; gap: 5px; }
.fd-preview-header button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #333; font-size: 25px; line-height: 18px; }
.fd-preview-header span { height: 19px; border-radius: 10px; background: rgba(106, 64, 202, .88); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 600; }
.fd-preview-scroll { position: absolute; inset: 53px 0 48px; padding-bottom: 22px; overflow: hidden; }
.fd-preview-ticker { height: 28px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.fd-preview-ticker span { min-width: 125px; height: 18px; border: 1px solid #52a4eb; background: rgba(233, 248, 255, .86); color: #237dca; display: flex; align-items: center; justify-content: center; font-size: 7px; white-space: nowrap; }
.fd-preview-hero { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fd-preview-box { position: relative; width: 105px; height: 96px; border: 3px solid #444; background: linear-gradient(145deg, #efefef, #777); box-shadow: 11px 10px 0 #555; display: flex; align-items: center; justify-content: center; transform: skewY(2deg); }
.fd-preview-box i { position: absolute; inset: 9px; border: 2px solid #333; background: repeating-linear-gradient(45deg, #ddd 0 5px, #666 5px 10px); opacity: .7; }
.fd-preview-box b { position: relative; z-index: 1; padding: 4px; background: rgba(255, 255, 255, .85); color: #222; font-size: 8px; }
.fd-preview-hero > strong { max-width: 240px; margin-top: 18px; color: #20222a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-preview-hero > span { margin-top: 4px; color: #17191e; font-size: 16px; font-weight: 800; }
.fd-preview-risk { min-height: 28px; width: 100%; display: block; line-height: 1.35; letter-spacing: 0; font-family: "Arial Black", "Microsoft YaHei", sans-serif; overflow-wrap: anywhere; box-sizing: border-box; }
.fd-preview-pool { min-height: 185px; margin-top: 5px; padding: 10px 12px; background: rgba(102, 55, 207, .92); }
.fd-preview-pool h4 { width: fit-content; margin: 0 0 9px; padding: 4px 9px; background: #fb7185; color: #fff; font-size: 9px; font-weight: 700; }
.fd-preview-pool h4 span { margin-left: 4px; font-weight: 500; }
.fd-preview-pool h4.gold { margin-top: 12px; background: #f0b92e; }
.fd-preview-pool > div { display: flex; gap: 10px; }
.fd-preview-pool i { width: 58px; height: 58px; border: 2px solid #ff8798; border-radius: 7px; background: linear-gradient(145deg, #ff9eaa, #f8697d); }
.fd-preview-clearance { height: 38px; }
.fd-preview-side { position: absolute; top: 47%; right: 0; z-index: 9; width: 35px; padding: 4px 0 4px 4px; border-radius: 7px 0 0 7px; background: rgba(255, 255, 255, .48); }
.fd-preview-side b { height: 29px; margin-bottom: 3px; border-radius: 4px 0 0 4px; background: #7143d3; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7px; }
.fd-preview-side b:last-child { margin-bottom: 0; }
.fd-preview-buy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; height: 44px; padding: 5px; background: #accdff; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; box-sizing: border-box; }
.fd-preview-buy span { border-radius: 5px; background: #55c6ed; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; }
.fd-preview-buy span:nth-child(2) { background: #f1bb2e; }
.fd-preview-buy span:nth-child(3) { background: #f15e79; }
.fd-preview-buy em { margin-top: 1px; font-size: 9px; font-style: normal; }
.fd-preview-mode { position: absolute; left: 8px; bottom: 50px; z-index: 12; padding: 3px 6px; border-radius: 3px; background: rgba(49, 55, 66, .86); color: #fff; font-size: 7px; font-weight: 500; }
.fd-preview-mode.on { background: rgba(22, 133, 63, .9); }

.fd-foot {
  min-height: 58px;
  padding: 0 18px;
  border-top: 1px solid #e7e9ed;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.fd-foot > span { margin-right: auto; color: #9098a4; font-size: 10px; }
.fd-action {
  height: 34px;
  padding: 0 15px;
  border: 1px solid #d7dce3;
  border-radius: 4px;
  background: #fff;
  color: #515c6b;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  cursor: pointer;
}
.fd-action:hover:not(:disabled) { border-color: #8fb8ed; color: #1677ff; }
.fd-action.primary { border-color: #1677ff; background: #1677ff; color: #fff; }
.fd-action.primary:hover:not(:disabled) { border-color: #0958d9; background: #0958d9; color: #fff; }
.fd-action:disabled { opacity: .6; cursor: wait; }

@media (max-width: 1120px) {
  .fd-toolbar { overflow-x: auto; align-items: end; }
  .fd-compact-field { flex: 0 0 112px; }
  .fd-compact-field.grow { flex: 0 0 260px; }
  .fd-layout { grid-template-columns: 238px minmax(330px, 1fr) 330px; }
}

@media (max-width: 860px) {
  #fudai-detail-decoration-admin-host { padding: 10px; }
  .fd-layout { grid-template-columns: 210px minmax(320px, 1fr); }
  .fd-preview { display: none; }
  .fd-head { padding: 0 14px; }
  .fd-status { display: none; }
  .fd-foot { padding: 0 10px; }
  .fd-foot > span { display: none; }
  .fd-reset { margin-right: auto; }
}

@media (max-width: 620px) {
  #fudai-detail-decoration-admin-host { padding: 6px; }
  .fd-layout { height: auto; min-height: 0; display: block; overflow-y: auto; }
  .fd-modules, .fd-inspector { overflow: visible; }
  .fd-modules { border-right: 0; border-bottom: 1px solid #e7e9ed; }
  .fd-inspector { padding: 17px 14px 24px; }
  .fd-field-grid { grid-template-columns: 1fr; }
  .fd-field.wide { grid-column: auto; }
  .fd-action { padding: 0 9px; font-size: 11px; }
}