.order-page-body{
  background:linear-gradient(180deg,#f4f7fc 0%, #f8fafd 42%, #faf8f4 100%);
}
.order-new-page{max-width:1180px;margin:0 auto}
.nav-logo-img{height:36px;width:auto}
.order-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(226,232,240,0.95);
}
.order-nav{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0.35rem 1rem 0.55rem;
}
.order-nav__meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0.45rem;
  padding-bottom:0.35rem;
  border-bottom:1px solid rgba(148,163,184,0.2);
  margin-bottom:0.45rem;
}
.order-nav-pill{
  display:inline-flex;
  align-items:center;
  padding:0.18rem 0.65rem;
  border-radius:999px;
  background:rgba(27,79,216,0.12);
  color:var(--brand-dark);
  border:1px solid rgba(27,79,216,0.2);
  font-size:11px;
  font-weight:700;
}
.order-nav-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#334155;
  font-size:11px;
  font-weight:700;
}
.order-nav-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,0.18);
}
.order-nav__bar{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.order-top-links{
  display:flex;
  align-items:center;
  gap:0.35rem;
  margin-inline-start:auto;
  flex-wrap:wrap;
}
.nav-back{
  text-decoration:none;
  color:#475569;
  font-size:var(--fs-small);
  font-weight:700;
  padding:0.45rem 0.7rem;
  border-radius:10px;
  transition:background .15s ease,color .15s ease;
}
.nav-back:hover{background:var(--brand-light);color:var(--brand)}
.nav-back-tertiary{
  color:#64748b;
  font-weight:680;
}
.nav-back-primary{
  color:#fff;
  background:linear-gradient(165deg,var(--brand) 0%,var(--brand-dark) 100%);
}
.nav-back-primary:hover{color:#fff;background:linear-gradient(165deg,var(--brand-dark) 0%,#0b246e 100%)}

.order-new-hero{
  padding:1.25rem;
  margin-bottom:1rem;
  background:linear-gradient(180deg,var(--dx-surface,#fff) 0%,var(--dx-muted-bg,#f8fbff) 100%);
  border:1px solid rgba(27,79,216,0.12);
}
.order-new-kicker{font-size:var(--fs-caption);color:var(--brand);font-weight:800;margin-bottom:4px}
.order-new-hero h1{font-size:var(--fs-h1);margin-bottom:6px}
.order-new-hero p{color:var(--muted);font-size:var(--fs-small)}
.order-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.order-hero-chips span{
  border:1px solid rgba(27,79,216,0.2);
  background:rgba(238,243,255,0.7);
  color:#334155;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
}

.order-new-card{padding:1.25rem;margin-bottom:1rem;border:1px solid rgba(15,23,42,0.07)}
.order-form-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(300px, 0.9fr);
  gap:14px;
  align-items:start;
}
.order-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.order-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--muted);font-weight:700}
.order-form-grid input,
.order-form-grid select{
  border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--dx-surface,#fff);min-height:44px;
  font-size:var(--fs-small);color:var(--text);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.order-form-grid input:focus,
.order-form-grid select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,79,216,0.12);
}
.order-form-full{grid-column:1 / -1}
.order-field-hint{font-size:12px;font-weight:500;color:var(--muted);line-height:1.45}
.order-swap-btn{
  min-height:40px;
  border-radius:10px;
  border:1px dashed rgba(27,79,216,0.35);
  color:var(--brand);
  font-weight:800;
  font-size:13px;
  background:var(--dx-surface,#fff);
  padding:0 12px;
  cursor:pointer;
}
.order-swap-btn:hover{background:var(--brand-light)}

.order-summary{margin:0;padding:14px;background:var(--bg);position:sticky;top:84px}
.order-summary-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.order-summary-head h3{margin:0;font-size:var(--fs-body)}
.order-summary-status{
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;
  font-size:var(--fs-caption);font-weight:700;color:var(--muted);background:var(--dx-surface,#fff)
}
.order-summary-status.ok{border-color:var(--success);color:var(--success);background:var(--success-light)}
.order-summary-status.warn{border-color:var(--warning);color:var(--warning);background:var(--warning-light)}
.order-summary-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.order-summary-rows div{
  border:1px solid var(--border);background:var(--dx-surface,#fff);border-radius:8px;padding:9px 10px;
  display:flex;flex-direction:column;gap:4px
}
.order-summary-rows span{font-size:var(--fs-caption);color:var(--muted);font-weight:700}
.order-summary-rows strong{font-size:var(--fs-small);color:var(--text)}
.order-rate-ltr{direction:ltr;unicode-bidi:isolate}
.order-preview-note{margin-top:8px;color:var(--muted);font-size:var(--fs-caption)}
.order-preview-note.err{color:var(--danger)}

.order-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.order-submit-btn{min-width:200px;min-height:40px;border-radius:10px;font-weight:700}
.order-cancel-link{
  color:var(--muted);font-size:var(--fs-small);font-weight:700;text-decoration:none;
  min-height:40px;display:inline-flex;align-items:center;padding:0 4px;
}
.order-cancel-link:hover{color:var(--brand)}
.order-submit-trust{
  margin-top:8px;
  font-size:12px;
  color:#475569;
  font-weight:600;
}

.order-result{
  margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--dx-surface,#fff);
  font-size:var(--fs-small)
}
.order-result.ok{border-color:var(--success);background:var(--success-light);color:var(--success)}
.order-result.err{border-color:var(--danger);background:var(--danger-light);color:var(--danger)}
.order-result a{color:inherit;font-weight:800}

.order-new-info{padding:1.25rem;margin-bottom:1rem}
.order-new-info h2{margin-bottom:8px}
.order-new-info ol{padding-right:1.2rem;color:var(--muted);font-size:var(--fs-small);line-height:1.9}
.order-new-warning{
  margin-top:10px;padding:10px;border:1px solid var(--warning);background:var(--warning-light);
  border-radius:8px;color:var(--warning);font-size:var(--fs-caption);font-weight:700
}
.order-new-warning a{color:inherit;font-weight:800}

.order-footer{
  margin-top:1.1rem;
  border-top:1px solid rgba(226,232,240,0.9);
  background:var(--dx-surface,#fff);
}
.order-footer__shell{
  max-width:1180px;
  margin:0 auto;
  padding:1rem 1rem 1.2rem;
}
.order-footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.order-footer__brand p{
  margin:0.55rem 0 0;
  color:var(--muted);
  font-size:var(--fs-caption);
  max-width:36rem;
  line-height:1.7;
}
.order-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
}
.order-footer__links a{
  text-decoration:none;
  color:#475569;
  font-size:var(--fs-caption);
  font-weight:700;
  padding:0.35rem 0.65rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.24);
  background:#f8fafc;
}
.order-footer__links a:hover{
  border-color:rgba(27,79,216,0.35);
  color:var(--brand);
  background:var(--brand-light);
}
.order-footer__bottom{
  margin-top:0.85rem;
  padding-top:0.8rem;
  border-top:1px solid rgba(226,232,240,0.8);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0.5rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:var(--fs-caption);
}
.order-footer__bottom a{
  color:var(--brand-dark);
  text-decoration:none;
  font-weight:700;
}
.order-footer__bottom a:hover{color:var(--brand)}
.order-footer__sep{opacity:0.55}

.order-flow-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(27,79,216,0.14);
  align-items:center;
}
.order-flow-toolbar__link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
  color:#1e3a5f;
  border:1px solid rgba(37,99,235,0.22);
  background:rgba(255,255,255,0.75);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.order-flow-toolbar__link:hover{
  border-color:rgba(27,79,216,0.45);
  color:var(--brand);
  background:var(--brand-light);
}

.order-summary-head-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.order-preview-refresh{
  min-height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(27,79,216,0.28);
  background:var(--dx-surface,#fff);
  color:var(--brand-dark);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}
.order-preview-refresh:hover:not(:disabled){
  background:var(--brand-light);
}
.order-preview-refresh:disabled{
  opacity:0.55;
  cursor:wait;
}

body.order-page-body.dash-app[data-dash-theme='dark'] .order-new-card {
  border-color: var(--dx-border);
}
body.order-page-body.dash-app[data-dash-theme='dark'] .order-new-hero {
  border-color: rgba(147, 197, 253, 0.22);
}
body.order-page-body.dash-app[data-dash-theme='dark'] .order-hero-chips span {
  background: rgba(82, 120, 255, 0.16);
  border-color: rgba(147, 197, 253, 0.32);
  color: var(--text);
}
body.order-page-body.dash-app[data-dash-theme='dark'] .order-flow-toolbar__link {
  color: var(--text);
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(147, 197, 253, 0.28);
}
body.order-page-body.dash-app[data-dash-theme='dark'] .order-preview-refresh {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(147, 197, 253, 0.35);
  color: var(--text);
}

@media (max-width: 960px){
  .order-form-layout{grid-template-columns:1fr}
  .order-summary{position:static;top:auto}
}

@media (max-width: 680px){
  .order-nav{
    padding:0.35rem 0.7rem 0.5rem;
  }
  .order-nav__meta{
    justify-content:flex-start;
    gap:0.3rem;
    padding-bottom:0.25rem;
    margin-bottom:0.35rem;
  }
  .order-nav-pill,.order-nav-status{font-size:10px}
  .order-nav__bar{align-items:flex-start}
  .order-top-links{gap:0.25rem}
  .nav-back{
    padding:0.4rem 0.55rem;
    font-size:12px;
  }
  .order-new-page{max-width:100%}
  .order-new-hero,.order-new-card,.order-new-info{padding:1rem}
  .order-new-hero p,.order-new-info ol{line-height:1.8}
  .order-hero-chips span{font-size:11px}
  .order-form-grid{grid-template-columns:1fr}
  .order-summary-rows{grid-template-columns:1fr}
  .order-actions{flex-direction:column;align-items:stretch}
  .order-submit-btn{width:100%}
  .order-footer__shell{padding:0.9rem 0.7rem 1rem}
  .order-footer__bottom{justify-content:flex-start}
}