/* Shipyard auth pages: dark "pipeline" backdrop with a glass card. Pure CSS + inline SVG, no JS. */
.auth-tech {
  --sy-bg: #060d1c;
  --sy-blue: #2b6cff;
  --sy-cyan: #17c3ff;
  --sy-line: rgba(90, 160, 255, .16);
  background: var(--sy-bg);
  color: #cfe0ff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- backdrop ---------- */
.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(43, 108, 255, .34), transparent 60%),
    radial-gradient(800px 560px at 6% 108%, rgba(23, 195, 255, .24), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(20, 40, 90, .55), transparent 70%),
    linear-gradient(180deg, #070f21 0%, #050a16 100%);
}
.auth-bg .grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--sy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sy-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 100%);
  animation: sy-drift 40s linear infinite;
}
.auth-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-bg .trace   { fill: none; stroke: rgba(70, 140, 255, .22); stroke-width: 1.4; }
.auth-bg .flow    { fill: none; stroke: var(--sy-cyan); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 14 170; filter: drop-shadow(0 0 5px var(--sy-cyan)); animation: sy-flow 7s linear infinite; }
.auth-bg .flow.b  { stroke: var(--sy-blue); filter: drop-shadow(0 0 5px var(--sy-blue)); animation-duration: 10s; animation-delay: -3s; }
.auth-bg .flow.c  { animation-duration: 13s; animation-delay: -6s; }
.auth-bg .node    { fill: #07122a; stroke: var(--sy-cyan); stroke-width: 1.6; }
.auth-bg .pulse   { fill: var(--sy-cyan); transform-box: fill-box; transform-origin: center; animation: sy-pulse 3.2s ease-out infinite; }
.auth-bg .stage   { fill: rgba(8, 20, 46, .8); stroke: rgba(90, 160, 255, .45); stroke-width: 1.2; }
.auth-bg .stage.live { stroke: var(--sy-cyan); filter: drop-shadow(0 0 8px rgba(23, 195, 255, .55)); }
.auth-bg .label   { fill: #9fc3ff; font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-anchor: middle; letter-spacing: .04em; }
.auth-bg .label.live { fill: #7be4ff; }

.auth-bg .term { position: absolute; margin: 0; padding: 14px 18px; font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7fa2d6; background: rgba(6, 14, 32, .55); border: 1px solid rgba(90, 160, 255, .18); border-radius: 10px; white-space: pre; opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.auth-bg .term.l { left: 4vw; bottom: 17vh; }
.auth-bg .term.r { right: 4vw; top: 9vh; }
.auth-bg .term .p { color: var(--sy-cyan); }
.auth-bg .term .ok { color: #4be0a0; }
.auth-bg .term .dim { color: #4f6a96; }
.auth-bg .term .cur { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--sy-cyan); animation: sy-blink 1.1s steps(1) infinite; }
@media (max-width: 1199px) { .auth-bg .term { display: none; } }
@media (max-width: 767px)  { .auth-bg .pipe { display: none; } }

@keyframes sy-flow  { to { stroke-dashoffset: -184; } }
@keyframes sy-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes sy-blink { 50% { opacity: 0; } }
@keyframes sy-drift { to { background-position: 56px 56px, 56px 56px; } }
@media (prefers-reduced-motion: reduce) { .auth-bg * { animation: none !important; } }

/* ---------- content ---------- */
.auth-tech .auth-box { position: relative; z-index: 1; min-height: 100vh; }
.auth-tech .card { background: rgba(8, 17, 38, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(90, 160, 255, .24); color: #cfe0ff;
  box-shadow: 0 0 0 1px rgba(23, 195, 255, .05), 0 24px 70px rgba(0, 0, 0, .55), 0 0 90px rgba(43, 108, 255, .16); }
.auth-tech .card::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sy-cyan), transparent); }
.auth-tech .card { position: relative; }
.auth-tech .text-dark, .auth-tech h4 { color: #fff !important; }
.auth-tech .text-muted { color: #8ea6cc !important; }
.auth-tech .form-label { color: #9fb7dc; font-size: .8rem; letter-spacing: .02em; }
.auth-tech .form-text { color: #6f87ad; }
.auth-tech .form-control { background: rgba(255, 255, 255, .04); border: 1px solid rgba(120, 170, 255, .26); color: #eaf2ff; }
.auth-tech .form-control::placeholder { color: #5f7599; }
.auth-tech .form-control:focus { background: rgba(255, 255, 255, .06); border-color: var(--sy-cyan);
  box-shadow: 0 0 0 .2rem rgba(23, 195, 255, .18); color: #fff; }
.auth-tech .btn-primary { background: linear-gradient(90deg, var(--sy-blue), var(--sy-cyan)); border: 0; color: #04122b;
  box-shadow: 0 6px 24px rgba(43, 108, 255, .4); }
.auth-tech .btn-primary:hover, .auth-tech .btn-primary:focus { filter: brightness(1.1); color: #04122b; box-shadow: 0 8px 30px rgba(23, 195, 255, .45); }
.auth-tech .btn-light, .auth-tech .btn-link { color: #9fb7dc; }
.auth-tech .btn-light { background: rgba(255, 255, 255, .06); border-color: rgba(120, 170, 255, .26); }
.auth-tech .btn-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.auth-tech .btn-link:hover { color: #fff; }
.auth-tech .alert { border: 1px solid; }
.auth-tech .alert-danger  { background: rgba(255, 77, 94, .12);  border-color: rgba(255, 77, 94, .4);  color: #ffb4bc; }
.auth-tech .alert-success { background: rgba(60, 220, 150, .12); border-color: rgba(60, 220, 150, .4); color: #9af0c8; }
.auth-tech .auth-logo { display: block; margin: -6px auto 8px; height: 104px; width: auto; filter: drop-shadow(0 0 22px rgba(43, 108, 255, .45)); }