.ie-card { overflow: hidden; }
.ie-heading { align-items: flex-start; gap: 16px; }
.ie-heading p { margin-top: 6px; color: var(--text-sub); font-size: 13px; }
.ie-local-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(52, 211, 153, .35);
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #86efac;
  font-size: 11px;
  font-weight: 800;
}
.ie-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 18px;
}
.ie-steps > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10, 17, 36, .78);
}
.ie-steps b {
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
}
.ie-steps span { min-width: 0; color: var(--text-muted); font-size: 11px; }
.ie-steps strong { display: block; color: #e2e8f0; font-size: 12px; }
.ie-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  min-height: 680px;
}
.ie-sidebar {
  max-height: 900px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.ie-tool-section {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0e1629;
}
.ie-tool-section h3 { margin: 0 0 11px; color: #f8fafc; font-size: 14px; }
.ie-tool-section.ie-attention {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}
.ie-wide { width: 100%; justify-content: center; margin-top: 8px; }
.ie-help { margin-top: 8px; color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.ie-label { display: block; margin: 10px 0 5px; color: var(--text-sub); font-size: 11px; font-weight: 700; }
.ie-edit-hint { float: right; color: #60a5fa; font-size: 10px; font-weight: 600; }
.ie-text-quick-tools { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; }
.ie-chip-btn {
  padding: 4px 8px;
  border: 1px solid #2a3a62;
  border-radius: 7px;
  background: #121d35;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.ie-chip-btn:hover { border-color: #60a5fa; background: #1e2c4d; color: #fff; }
.ie-chip-danger { color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
.ie-chip-danger:hover { border-color: #f87171; background: rgba(239, 68, 68, .2); color: #fff; }
.ie-align-tools { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; }
.ie-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #2a3a62; background: #0b1428;
}
.ie-nudge-label { color: var(--text-muted); font-size: 10px; font-weight: 700; line-height: 1.4; max-width: 54%; }
.ie-nudge-pad { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ie-nudge-mid { display: flex; gap: 3px; }
.ie-nudge-btn {
  width: 30px; height: 26px; border-radius: 7px; border: 1px solid #334155;
  background: #121d35; color: #e2e8f0; font-size: 12px; font-weight: 800; cursor: pointer;
}
.ie-nudge-btn:hover { border-color: #60a5fa; color: #fff; background: #1e2c4d; }
.ie-bg-color-row { display: flex; align-items: center; gap: 6px; }
.ie-bg-color-row input[type="color"] { flex: 1; min-width: 0; }
.ie-bg-color-row .ie-chip-btn { flex: 0 0 auto; margin: 0; padding: 7px 10px; }
.ie-bg-color-row .ie-chip-btn.active {
  border-color: #60a5fa; background: rgba(59,130,246,.22); color: #fff;
}
.ie-bg-disabled input[type="color"] {
  opacity: .35; pointer-events: none; filter: grayscale(.4);
}
.ie-btn-danger { border-color: rgba(239, 68, 68, .4) !important; background: rgba(239, 68, 68, .14) !important; color: #fca5a5 !important; }
.ie-btn-danger:hover { background: rgba(239, 68, 68, .25) !important; color: #fff !important; }
.ie-tool-section textarea,
.ie-tool-section select,
.ie-tool-section input[type="number"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #2a3a62;
  border-radius: 9px;
  background: #091125;
  color: #fff;
  font-size: 12px;
}
.ie-tool-section textarea { resize: vertical; line-height: 1.5; }
.ie-tool-section textarea.ie-ready-to-edit { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.ie-translation {
  padding: 10px;
  border: 1px solid #263657;
  border-radius: 11px;
  background: rgba(8, 17, 37, .8);
}
.ie-translation.loading { border-color: #60a5fa; }
.ie-translation.success { border-color: rgba(52, 211, 153, .55); background: rgba(16, 185, 129, .08); }
.ie-translation.error { border-color: rgba(248, 113, 113, .55); background: rgba(239, 68, 68, .08); }
.ie-translation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ie-translation-head strong { color: #dbeafe; font-size: 11px; }
.ie-translation-head span { color: var(--text-muted); font-size: 10px; }
.ie-translation.loading .ie-translation-head span { color: #93c5fd; }
.ie-translation.success .ie-translation-head span { color: #86efac; }
.ie-translation.error .ie-translation-head span { color: #fca5a5; }
.ie-translation dl { display: grid; gap: 7px; margin: 9px 0 0; }
.ie-translation dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 7px; }
.ie-translation dt { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.ie-translation dd { margin: 0; color: #e2e8f0; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ie-translation .ie-link-button { margin-top: 8px; }
.ie-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ie-segmented button,
.ie-icon-button {
  padding: 8px 9px;
  border: 1px solid #2a3a62;
  border-radius: 9px;
  background: #121d35;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
}
.ie-segmented button.active { border-color: #60a5fa; background: rgba(37, 99, 235, .28); color: #fff; }
.ie-inline-control { display: grid; grid-template-columns: 1fr 42px; gap: 7px; }
.ie-inline-control input[type="color"],
.ie-control-grid input[type="color"] {
  width: 100%;
  min-height: 37px;
  padding: 3px;
  border: 1px solid #2a3a62;
  border-radius: 9px;
  background: #091125;
}
.ie-link-button {
  display: block;
  margin: 9px auto 0;
  padding: 3px;
  background: transparent;
  color: #93c5fd;
  font-size: 11px;
  text-decoration: underline;
}
.ie-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ie-control-grid label span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.ie-layer-head { display: flex; align-items: center; justify-content: space-between; }
.ie-layer-head h3 { margin-bottom: 0; }
.ie-layer-head span { color: var(--text-muted); font-size: 11px; }
.ie-layer-list { display: grid; gap: 6px; margin-top: 10px; }
.ie-layer-list > p { padding: 10px 3px; color: var(--text-muted); font-size: 11px; text-align: center; }
.ie-layer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  border: 1px solid #263657;
  border-radius: 9px;
  background: #111c33;
}
.ie-layer-item.active { border-color: #60a5fa; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .3); }
.ie-layer-name { overflow: hidden; color: #dbeafe; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ie-layer-actions { display: flex; gap: 3px; }
.ie-layer-actions button { width: 25px; height: 25px; border-radius: 6px; background: #1e2c48; color: #cbd5e1; font-size: 11px; }
.ie-layer-actions button:last-child { color: #fca5a5; }
.ie-workspace {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #08101f;
}
.ie-workspace.dragover { border-color: #60a5fa; box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .22); }
.ie-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 10px; }
.ie-toolbar > div { display: flex; gap: 5px; }
.ie-toolbar > span { color: var(--text-muted); font-size: 11px; text-align: center; }
.ie-toolbar > .ie-danger { justify-self: end; color: #fca5a5; }
.ie-icon-button:disabled { cursor: not-allowed; opacity: .4; }
.ie-canvas-stage {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 520px;
  place-items: center;
  overflow: auto;
  padding: 18px;
  border-radius: 12px;
  background-color: #111827;
  background-image: linear-gradient(45deg, #182237 25%, transparent 25%), linear-gradient(-45deg, #182237 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #182237 75%), linear-gradient(-45deg, transparent 75%, #182237 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
#ieCanvas {
  display: none;
  max-width: 100%;
  max-height: 760px;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .48);
  touch-action: none;
  user-select: none;
}
#ieCanvas.ready { display: block; }
#ieCanvas.mode-select { cursor: crosshair; }
#ieCanvas.mode-move { cursor: move; }
.ie-empty { display: flex; max-width: 420px; flex-direction: column; align-items: center; gap: 8px; padding: 28px; text-align: center; }
.ie-empty[hidden] { display: none; }
.ie-empty > span { font-size: 52px; filter: grayscale(.2); }
.ie-empty strong { color: #e2e8f0; font-size: 17px; }
.ie-empty p { color: var(--text-muted); font-size: 12px; }
.ie-status {
  min-height: 35px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(30, 41, 59, .72);
  color: #94a3b8;
  font-size: 11px;
}
.ie-status.success { background: rgba(16, 185, 129, .12); color: #86efac; }
.ie-status.error { background: rgba(239, 68, 68, .12); color: #fca5a5; }
.ie-downloads { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ie-downloads select { min-width: 130px; padding: 9px; border: 1px solid #2a3a62; border-radius: 9px; background: #101a30; color: #fff; }

@media (max-width: 1000px) {
  .ie-steps { grid-template-columns: 1fr 1fr; }
  .ie-layout { grid-template-columns: 1fr; }
  .ie-sidebar { display: grid; max-height: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; }
  .ie-tool-section { margin: 0; }
}
@media (max-width: 680px) {
  .ie-heading { flex-direction: column; }
  .ie-steps, .ie-sidebar { grid-template-columns: 1fr; }
  .ie-canvas-stage { min-height: 360px; padding: 8px; }
  .ie-toolbar { grid-template-columns: 1fr auto; }
  .ie-toolbar > span { display: none; }
  .ie-downloads { display: grid; grid-template-columns: 1fr; }
  .ie-downloads .btn { width: 100%; justify-content: center; }
}