:root {
  --ink: #092634;
  --muted: #526b77;
  --paper: #f9f9f9;
  --card: #ffffff;
  --line: #d7e2e7;
  --green: #092634;
  --green2: #004e72;
  --lime: #ff6845;
  --amber: #ed6b49;
  --red: #b23a2b;
  --blue: #004e72;
  --shadow: 0 16px 42px rgba(9, 38, 52, 0.08);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(circle at 92% 0, rgba(0, 78, 114, 0.09), transparent 25rem),
    var(--paper);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #ffffff; background: #004e72; }

.login-shell h1,
.login-card h2,
.lane-head h1,
.vehicle-title strong,
dialog h2 {
  font-family: "Avenir Next", Avenir, "Segoe UI Variable", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 650;
}

b, strong { font-weight: 650; }
.eyebrow { color: var(--green2); font-weight: 700; }
.login-shell > section .eyebrow { color: #ff9b84; }
.login-card .eyebrow { color: #b8422a; }
.brand strong { font-weight: 650; }
.brand-mark { font-weight: 700; }
.primary,
.secondary,
.ghost,
.warning,
.danger { min-height: 2.75rem; font-weight: 620; }
.login-card label,
dialog label,
.form-grid label { font-weight: 580; }
.advanced-login summary { font-weight: 620; }
.pill,
.token-chip,
.stage-bar li,
.auto-toggle { font-weight: 620; }

.login-help,
.lane-copy,
.card-copy {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.login-help { margin: -0.55rem 0 0.4rem; }
.lane-copy { max-width: 46rem; margin: 0.35rem 0 0; font-size: 0.82rem; }
.card-copy { margin: 0.22rem 0 0; }

.advanced-login {
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.75rem 0.85rem;
  background: #f1f7f9;
}

.advanced-login summary {
  cursor: pointer;
  color: var(--green2);
  font-size: 0.78rem;
  font-weight: 620;
}

.advanced-login p { margin: 0.55rem 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.advanced-login label + label { margin-top: 0.6rem; }

.operation-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}

.operation-progress span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6845, #004e72);
  transform: translateX(-120%);
}

.operation-progress.active { opacity: 1; }
.operation-progress.active span { animation: operation-progress 1.1s ease-in-out infinite; }

button,
.secondary,
.ghost,
.card,
.queue-item,
.stage-bar li,
input,
select,
textarea {
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

button,
.secondary,
.ghost,
.queue-item {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled),
a.secondary:hover { transform: translateY(-1px); }
button:active:not(:disabled),
a.secondary:active { transform: translateY(1px) scale(0.975); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(0, 78, 114, 0.25);
  outline-offset: 2px;
}

.primary {
  background: linear-gradient(135deg, #004e72, #006b91);
  box-shadow: 0 7px 18px rgba(0, 78, 114, 0.2);
}

.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #00618b, #007ba3);
  box-shadow: 0 10px 24px rgba(0, 78, 114, 0.28);
}

.secondary:hover:not(:disabled),
a.secondary:hover { border-color: #a9c5d2; background: #f1f7f9; }
.ghost:hover:not(:disabled) { background: rgba(0, 78, 114, 0.08); }
button:disabled { cursor: wait; opacity: 0.62; }

.button-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: button-ripple 520ms ease-out forwards;
}

.topbar {
  background:
    radial-gradient(circle at 8% 0, rgba(255, 104, 69, 0.18), transparent 15rem),
    linear-gradient(110deg, #092634, #061a24);
  box-shadow: 0 12px 34px rgba(9, 38, 52, 0.18);
}

.card {
  border-color: rgba(215, 226, 231, 0.96);
  box-shadow: 0 8px 24px rgba(9, 38, 52, 0.05);
  animation: card-enter 440ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.console-grid .card:nth-child(2) { animation-delay: 50ms; }
.console-grid .card:nth-child(3) { animation-delay: 100ms; }
.yard-grid .card:nth-child(1) { animation-delay: 140ms; }
.yard-grid .card:nth-child(2) { animation-delay: 190ms; }
.card:hover { border-color: #a9c5d2; box-shadow: 0 20px 48px rgba(9, 38, 52, 0.12); }

.stage-bar { background: #eaf3f7; box-shadow: inset 0 1px 2px rgba(9, 38, 52, 0.06); }
.stage-bar li.current { background: linear-gradient(135deg, #004e72, #006b91); box-shadow: 0 7px 18px rgba(0, 78, 114, 0.22); animation: current-stage 2.2s ease-in-out infinite; }
.stage-bar li.done { background: #fff0ea; }
.stage-bar li.done span { animation: check-pop 300ms ease-out; }
.guidance { border-left-color: #ff6845; background: #fff0ea; color: #6e3428; font-size: 0.8rem; }
.scale-display { color: #f9f9f9; background: radial-gradient(circle at 90% 30%, rgba(255, 104, 69, 0.13), transparent 10rem), #092634; }
.scale-display span { color: #ff9b84; }
.scale-display.updated { animation: weight-lock 520ms ease; }
.plate-status-card { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.8rem; padding:.72rem .8rem; border:1px solid #d7e2e7; border-radius:.85rem; background:#f7fafb; }
.plate-status-card div { display:grid; gap:.12rem; }
.plate-status-card span,.plate-status-card small { color:var(--muted); font-size:.68rem; }
.plate-status-card strong { font-size:.86rem; color:#092634; }
.plate-status-card.passed { border-color:#93c9b5; background:#edf8f3; }
.plate-status-card.failed { border-color:#f1b4a6; background:#fff0ea; }
.plate-status-card.passed strong { color:#176247; }
.plate-status-card.failed strong { color:#8b3426; }
.plate-actions { display:flex!important; grid-auto-flow:column; gap:.4rem; align-items:center; }
.plate-actions button { white-space:nowrap; }
.checklist-wrap { margin:.85rem 0; padding:.8rem; border:1px solid var(--line); border-radius:.85rem; background:#f7fafb; }
.checklist-wrap > strong { font-size:.76rem; }
.checklist-wrap > small { color:var(--muted); font-size:.66rem; line-height:1.4; display:block; margin-top:.45rem; }
.slip-checklist { list-style:none; padding:0; margin:.55rem 0 0; display:grid; gap:.35rem; }
.slip-checklist li { display:flex; align-items:center; gap:.5rem; color:#5a6870; font-size:.72rem; }
.slip-checklist li::before { content:""; width:.78rem; height:.78rem; flex:0 0 auto; border-radius:50%; border:2px solid #aab9c0; }
.slip-checklist li.passed { color:#176247; }
.slip-checklist li.passed::before { content:"✓"; display:grid; place-items:center; border-color:#2b8a67; background:#2b8a67; color:#fff; font-size:.54rem; font-weight:700; animation:check-pop 300ms ease-out; }
.stability-track span { transition: width 320ms ease, background-color 220ms ease; }
.live-dot { animation: connection-pulse 2.4s ease-out infinite; }
.live-dot.offline { animation: none; }

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  animation: toast-enter 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.toast::before { content: "✓"; color: #ff9b84; font-weight: 700; }
.toast.error::before { content: "!"; color: #fff1d1; }
.toast.is-leaving { animation: toast-leave 180ms ease forwards; }
.brand-mark { background: linear-gradient(145deg, #ff8b70, #ff6845); color: #092634; box-shadow: 0 8px 22px rgba(9, 38, 52, 0.24); }
.login-shell > section { background: radial-gradient(circle at 18% 18%, rgba(255, 104, 69, 0.25), transparent 29%), linear-gradient(140deg, #092634, #004e72); }

@keyframes operation-progress { 50% { transform: translateX(92vw); } 100% { transform: translateX(240vw); } }
@keyframes button-ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }
@keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes current-stage { 50% { box-shadow: 0 9px 24px rgba(0, 78, 114, 0.32); } }
@keyframes check-pop { 50% { transform: scale(1.14); } }
@keyframes weight-lock { 45% { box-shadow: inset 0 0 34px rgba(255, 104, 69, 0.22), 0 0 0 3px rgba(0, 78, 114, 0.17); } }
@keyframes toast-enter { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
@keyframes toast-leave { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes connection-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 104, 69, 0.38); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 104, 69, 0); } }

@media (max-width: 820px) {
  .lane-copy { font-size: 0.76rem; }
  .card-copy { max-width: 21rem; }
}

@media (max-width: 520px) {
  .brand small {
    display: block;
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CrusherOS v0.8 shared visual language. Safety states remain semantic and high contrast. */
:root {
  --ink: #09090b;
  --muted: #71717a;
  --paper: #f4f4f6;
  --card: #ffffff;
  --line: #e4e4e7;
  --green: #09090b;
  --green2: #18181b;
  --lime: #f4741e;
  --amber: #d97706;
  --red: #dc2626;
  --blue: #09090b;
  --shadow: 0 12px 34px rgba(9, 9, 11, 0.06);
}

body { background: var(--paper); }
::selection { color: #fff; background: #f4741e; }
.crusher-logo {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(9, 9, 11, 0.15));
}
.gate-login-logo {
  width: auto;
  max-width: 14rem;
  height: 3.5rem;
  border-radius: 0;
}
.login-shell { background: #09090b; }
.login-shell > section { background: radial-gradient(circle at 20% 18%, rgba(255,85,0,.15), transparent 23rem), linear-gradient(140deg,#09090b,#18181b); }
.login-shell > section .eyebrow { color: #f4741e; }
.login-shell h1 span { color: #ffffff; }
.login-shell > section > p:last-child { color: #a1a1aa; }
.login-card { background: #fff; box-shadow: -24px 0 70px rgba(9,9,11,.16); }
.login-card .eyebrow { color: #f4741e; }
.advanced-login { background: #f4f4f5; }
.advanced-login summary { color: #09090b; }
input, select, textarea, .login-card input { border-color: #e4e4e7; }
input:focus, select:focus, textarea:focus, .login-card input:focus { border-color: #09090b; box-shadow: 0 0 0 3px rgba(255,85,0,.2); }
.primary { background: #f4741e; color: #ffffff; box-shadow: 0 7px 18px rgba(255,85,0,.25); }
.primary:hover:not(:disabled) { background: #e64d00; box-shadow: 0 10px 25px rgba(255,85,0,.35); }
.secondary { color: #09090b; background: #ffffff; border-color: #18181b; }
.secondary:hover:not(:disabled), a.secondary:hover { color: #09090b; border-color: #09090b; background: #f4f4f5; }
.ghost { color: #f4741e; }
.ghost:hover:not(:disabled) { background: rgba(255,85,0,.08); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #f4741e; }
.operation-progress span { background: linear-gradient(90deg,#f4741e,#e64d00); }
.topbar { color: var(--ink); background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); box-shadow: 0 4px 20px rgba(9,9,11,.04); }
.brand small, .top-status { color: #71717a; }
.topbar .secondary { color: #09090b; background: #ffffff; border-color: #18181b; }
.topbar .ghost { color: #f4741e; }
.live-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.token-chip { background: #09090b; color: #ffffff; }
.stage-bar { background: #f4f4f5; }
.stage-bar li.done { color: #09090b; background: #e4e4e7; }
.stage-bar li.done span { color: #fff; background: #09090b; }
.stage-bar li.current { color: #fff; background: #f4741e; box-shadow: 0 7px 18px rgba(255,85,0,.22); }
.stage-bar li.current span { color: #f4741e; background: #ffffff; }
.card { border-color: var(--line); border-radius: .8rem; box-shadow: 0 8px 25px rgba(9,9,11,.045); }
.card:hover { border-color: #a1a1aa; box-shadow: 0 18px 44px rgba(9,9,11,.12); }
.guidance { border-left-color: #f4741e; color: #09090b; background: #fff7f4; }
.scale-display { color: #fff; background: #09090b; border: 1px solid #18181b; }
.scale-display span { color: #f4741e; }
.plate-status-card, .checklist-wrap { background: #f4f4f5; }
.plate-status-card strong { color: var(--ink); }
.queue-item:hover, .queue-item.active { border-color: #f4741e; background: #fff7f4; }
.toast { background: #09090b; }
.toast::before { color: #f4741e; }
@keyframes current-stage { 50% { box-shadow: 0 9px 24px rgba(255,85,0,.34); } }
@keyframes weight-lock { 45% { box-shadow: inset 0 0 34px rgba(255,85,0,.24), 0 0 0 3px rgba(255,85,0,.16); } }
@keyframes connection-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.34); } 70%,100% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }