/* Top-level layout: top bar, stepper, main area, panels. */

/* ============ Header ============ */
.topbar {
  position: relative; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-1), transparent);
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 18px; }
.brand-mark {
  width: 44px; height: 44px;
  background:
    conic-gradient(from 0deg, var(--red-deep), var(--blue-deep), var(--red-deep));
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 24px rgba(74,143,231,0.4);
}
.brand-mark::before {
  content: ''; position: absolute; inset: 4px;
  background: var(--bg-0);
  border-radius: 50%;
}
.brand-mark::after {
  content: '◈'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); color: var(--yellow); text-shadow: 0 0 8px rgba(240,197,66,0.7);
}
.brand-text { line-height: 1; }
.brand-text .t1 { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: 0.08em; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.build-stamp {
  padding: 4px 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--text-faint);
  background: var(--bg-1);
  border: 1px solid var(--line);
}

/* ============ Stepper row ============ */
/* Stepper + proceed button on a single horizontal row. The button hugs the
   right edge so it sits where the eye naturally lands after reading the
   step sequence left-to-right. Pinned to the top of the viewport so a long
   page (Allocate / Resolve / Result) keeps the stepper + Proceed visible
   when the user scrolls. The top brand bar above intentionally stays
   non-sticky so vertical real estate isn't wasted on it. */
.stepper-row {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  padding-right: 28px;
}
.stepper-row .btn { flex-shrink: 0; }
.stepper {
  display: flex; align-items: center;
  padding: 18px 28px;
  gap: 0;
  flex: 1; min-width: 0;
  overflow-x: auto;
}
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  flex-shrink: 0;
  position: relative;
}
.step + .step::before {
  content: ''; position: absolute; left: -1px; top: 50%;
  width: 1px; height: 60%; background: var(--line);
  transform: translateY(-50%);
}
.step-num {
  width: 28px; height: 28px;
  border: 1px solid var(--line-bright);
  background: var(--bg-2);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--fs-xs);
  transition: all 0.3s;
}
.step-label {
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.3s;
}
.step.active .step-num {
  background: var(--yellow); color: var(--bg-0); border-color: var(--yellow);
  box-shadow: 0 0 12px rgba(240,197,66,0.5);
}
.step.active .step-label { color: var(--text); }
.step.done .step-num {
  background: var(--green); color: var(--bg-0); border-color: var(--green);
}
.step.done .step-label { color: var(--text); }

/* ============ Main ============ */
main {
  position: relative; z-index: 2;
  padding: 28px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ============ Cards / Panels ============ */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative;
}
.panel-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-2), transparent);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title {
  font-family: var(--font-display); font-size: 17px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  display: flex; align-items: center; gap: 12px;
}
.panel-title::before {
  content: ''; width: 4px; height: 16px; background: var(--yellow);
}
.panel-body { padding: 20px; }
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--yellow);
  opacity: 0.6;
}
.corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }