/* Element Plus–flavored form/control primitives, layered over Poppins */

/* Inputs */
.ep-input {
  display: block; width: 100%; height: 40px;
  padding: 0 12px; border: 1px solid var(--color-hairline);
  border-radius: 6px; background: #fff;
  font: 400 14px/1.4 var(--font-body); color: var(--color-ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea.ep-input { height: auto; padding: 10px 12px; resize: vertical; font: 400 14px/1.5 var(--font-body); }
.ep-input::placeholder { color: var(--color-muted-soft); }
.ep-input:hover { border-color: var(--color-muted-soft); }
.ep-input:focus { outline: 0; border-color: var(--dae-blue); box-shadow: 0 0 0 3px rgba(39,76,119,0.10); }

/* Region radio cards */
.ep-region {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; height: 40px;
  border: 1px solid var(--color-hairline); border-radius: 6px;
  background: #fff; cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
}
.ep-region:hover { border-color: var(--dae-blue-500); }
.ep-region[data-on="true"] { border-color: var(--dae-blue); background: var(--dae-blue-050); }
.ep-region-code {
  font: 600 13px/1 var(--font-mono); letter-spacing: 0.04em;
  color: var(--dae-blue); padding: 4px 8px; border-radius: 4px; background: var(--dae-blue-100);
}
.ep-region[data-on="false"]:not([data-on]) .ep-region-code { color: var(--color-muted); background: var(--color-surface-soft); }
.ep-region-lbl { font: 500 13px/1 var(--font-body); color: var(--color-ink); }

/* Segmented tabs */
.ep-tabs { display: inline-flex; padding: 3px; background: var(--color-surface-soft); border-radius: 8px; }
.ep-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: 5px;
  font: 500 12px/1 var(--font-body); color: var(--color-muted);
  transition: background 150ms ease, color 150ms ease;
}
.ep-tab[data-on="true"] { background: #fff; color: var(--color-ink); box-shadow: 0 1px 2px rgba(14,29,49,.06); }
.ep-tab:hover:not([data-on="true"]) { color: var(--color-ink); }

/* Select-style trigger */
.ep-select {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--color-hairline); background: #fff;
  font: 500 12px/1 var(--font-body); color: var(--color-ink);
  cursor: pointer; transition: border-color 150ms ease;
}
.ep-select:hover { border-color: var(--color-muted-soft); }
.ep-select svg { color: var(--color-muted); }

/* Top-bar icon button */
.ep-iconbtn, .ep-iconbtn-ghost {
  position: relative;
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--color-hairline);
  background: #fff; color: var(--color-body); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 150ms ease;
}
.ep-iconbtn-ghost { border-color: transparent; background: transparent; }
.ep-iconbtn:hover { border-color: var(--color-muted-soft); }
.ep-iconbtn-ghost:hover { background: var(--color-surface-soft); }