#orderPlatformsOverlay {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 28, 48, .4);
}
#orderPlatformsOverlay[hidden], #orderPlatformsOverlay [hidden] { display: none; }
body.op-settings-open { overflow: hidden; }
#orderPlatformsDialog {
  width: 680px; max-width: 100%; max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
  background: #fff; color: #273247; border: 1px solid #e1e6ee; border-radius: 12px;
  box-shadow: 0 18px 60px rgba(20, 28, 48, .25); overflow: hidden; text-align: left;
}
#orderPlatformsDialog *, #orderPlatformsOverlay { box-sizing: border-box; }
.op-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e7eaf0; flex: 0 0 auto; }
.op-head h2 { margin: 0; font-size: 19px; }
.op-content { padding: 18px 20px 22px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.op-intro { margin: 0 0 16px; color: #5a667a; font-size: 13px; line-height: 1.65; }
.op-existing { margin-bottom: 10px; padding: 12px 14px; border: 1px solid #e6eaf0; border-radius: 8px; }
.op-existing > div, .op-platform-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.op-existing strong { font-size: 14px; }
.op-existing p { margin: 5px 0 0; font-size: 12px; color: #687386; }
.op-badge { display: inline-block; border-radius: 5px; padding: 3px 7px; background: #eef2f8; color: #5b687e; font-size: 12px; line-height: 1.5; }
.op-badge[data-state="connected"] { background: #e6f6ed; color: #167046; }
.op-badge[data-state="expired"], .op-badge[data-state="error"] { background: #fff0e8; color: #a64b20; }
.op-platform { margin: 14px 0; padding: 16px; border: 1px solid #d8e3f4; border-radius: 8px; }
.op-platform-title h3 { margin: 0; font-size: 16px; }
.op-muted, .op-help, .op-feedback, .op-confirm p { font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.op-muted { color: #687386; margin: 8px 0; }
.op-help { margin: 14px 0; padding: 10px 12px; background: #f4f7fc; color: #53647c; border-radius: 6px; }
.op-account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; font-size: 12px; line-height: 1.6; margin: 10px 0; }
.op-account dt { color: #687386; }
.op-account dd { margin: 0; overflow-wrap: anywhere; }
.op-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#orderPlatformsDialog label { display: block; min-width: 0; font-size: 12px; font-weight: 600; color: #47546b; }
#orderPlatformsDialog input { display: block; width: 100%; min-width: 0; margin: 6px 0 12px; height: 38px; padding: 8px 10px; border: 1px solid #d7dfeb; border-radius: 6px; background: #fff; color: #273247; font-size: 14px; }
#orderPlatformsDialog input:focus { outline: 2px solid #c0d6ff; border-color: #2b6de8; }
#orderPlatformsDialog .btn { min-height: 36px; white-space: normal; }
#orderPlatformsDialog button:disabled, #orderPlatformsDialog input:disabled { opacity: .55; cursor: not-allowed; }
#orderPlatformsDialog .op-danger { color: #ad3434; border-color: #e9c8c8; background: #fff; }
.op-check { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e7eaf0; }
.op-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.op-feedback { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; background: #edf5ff; color: #245f9c; }
.op-feedback.op-error { color: #a33c29; background: #fff0e9; }
.op-confirm { margin-top: 12px; padding: 12px; border: 1px solid #eccfc5; border-radius: 6px; }
.op-confirm p { margin: 0 0 10px; }
@media (max-width: 700px) {
  #orderPlatformsOverlay { padding: 0; }
  #orderPlatformsDialog { width: 100%; height: 100%; max-height: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
  .op-head { padding: 13px 14px; }
  .op-head h2 { font-size: 17px; }
  .op-content { padding: 14px; }
  .op-platform { padding: 12px; }
  .op-fields { grid-template-columns: 1fr; gap: 0; }
  .op-actions > .btn { flex: 1 1 115px; }
  #orderPlatformsDialog input { font-size: 16px; }
  .op-account { grid-template-columns: 1fr; gap: 2px; }
  .op-account dd { margin-bottom: 5px; }
}