.al-order-page { background: #f4f7fb; color: #1c3048; }
.order-shell { max-width: 1560px; margin: 0 auto; padding: 34px 32px 26px; }
.order-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.order-eyebrow { margin: 0 0 10px; color: #52718d; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.order-page-head h1 { margin: 0; font-size: clamp(29px,3vw,42px); line-height: 1.15; letter-spacing: -.045em; }
.order-intro { margin: 12px 0 0; color: #5e7186; font-size: 14px; line-height: 1.7; }
.order-account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.order-signin, .order-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 15px; border: 1px solid #cbd9e8; border-radius: 11px; color: #245f99; background: #fff; text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.order-message { padding: 14px 18px; margin: 0 0 16px; border: 1px solid; border-radius: 12px; font-size: 13px; line-height: 1.7; }
.order-error { color: #8f462b; background: #fff3ec; border-color: #edcbb9; }
.order-notice { color: #23644a; background: #edf9f2; border-color: #bcdfcd; }
.order-retry { margin: 0 0 16px; }
.order-admin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; margin-bottom: 22px; border: 1px solid #e8d7c8; border-radius: 14px; background: #fffaf5; }
.order-admin b { font-size: 12px; color: #81552f; }
.order-admin p { margin: 6px 0 0; max-width: 720px; font-size: 11px; line-height: 1.7; color: #846e5c; }
.order-clear-button { flex-shrink: 0; min-height: 42px; padding: 9px 13px; border: 1px solid #dabfac; border-radius: 10px; color: #8c4b32; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.order-clear-button:disabled { opacity: .5; cursor: not-allowed; }
.order-clear-confirm { flex-basis: 100%; border-top: 1px solid #eadcd1; padding-top: 10px; }
.order-clear-confirm > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.order-clear-confirm .order-retry { margin: 0; }
.order-waiting { padding: 65px 24px; border: 1px solid #dce6f0; border-radius: 23px; background: #fff; text-align: center; }
.order-waiting-icon { display: block; font-size: 47px; color: #6c9dc4; }
.order-waiting h2 { font-size: 23px; letter-spacing: -.03em; }
.order-waiting p { max-width: 520px; margin: 16px auto; color: #60768b; line-height: 1.8; font-size: 14px; }
.order-waiting a { display: inline-block; color: #2563a9; font-size: 14px; font-weight: 700; margin-top: 8px; }
.order-rounds { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.order-round { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 5px 13px; padding: 18px; border: 1px solid #dbe5ee; border-radius: 17px; background: #fff; text-align: left; color: #294762; cursor: pointer; font: inherit; }
.order-round-number { grid-area: 1 / 1 / 4 / 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #edf2f7; color: #6e8397; font-size: 19px; font-weight: 800; }
.order-round b { font-size: 15px; }
.order-round small { color: #657b90; font-size: 12px; }
.order-round-progress { color: #718499; font-size: 11px; margin-top: 3px; }
.order-round.is-selected { border-color: #6499c7; box-shadow: 0 0 0 2px #dcebf7; }
.order-round.is-active .order-round-number { background: #2563a9; color: #fff; }
.order-round.is-complete .order-round-number { background: #e7f5ec; color: #287653; }
.order-round.is-locked { background: #f9fbfd; }
.order-workbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 26px 0 20px; }
.order-workbar h2 { margin: 0 0 7px; font-size: 19px; letter-spacing: -.025em; }
.order-workbar p { margin: 0; color: #697e91; font-size: 12px; line-height: 1.7; }
.order-identity { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.order-identity select { width: 255px; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cbd9e6; border-radius: 10px; background: #fff; color: #28465f; font-size: 12px; }
.order-centres { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.order-centre { --centre: #3b87ac; --centre-wash: #ebf7fd; --centre-border: #cce7f4; min-width: 0; overflow: hidden; border: 1px solid var(--centre-border); border-radius: 20px; background: #fff; }
.centre-proton { --centre: #1d769d; --centre-wash: #e9f7ff; --centre-border: #bfe3f4; }
.centre-akn5 { --centre: #174b9b; --centre-wash: #edf2ff; --centre-border: #cbd8f3; }
.centre-hv { --centre: #b76523; --centre-wash: #fff3e8; --centre-border: #efd7bf; }
.order-centre-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 19px; background: var(--centre-wash); }
.order-centre-head h3 { margin: 0; color: var(--centre); font-size: 17px; letter-spacing: -.02em; }
.order-centre-count { font-size: 11px; font-weight: 700; color: var(--centre); background: #ffffffb8; padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
.order-centre-progress { height: 3px; background: var(--centre-border); }
.order-centre-progress span { display: block; height: 100%; background: var(--centre); transition: width .2s; }
.order-turn { min-height: 195px; padding: 20px; border-bottom: 1px solid #e8edf3; }
.order-turn-label { color: var(--centre); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.order-turn h4 { margin: 10px 0 8px; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.order-turn p { margin: 0 0 15px; color: #778b9d; font-size: 11px; line-height: 1.6; }
.order-complete-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 10px; border: 1px solid var(--centre); border-radius: 10px; background: var(--centre); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.order-complete-button:disabled { background: #f3f6fa; color: #8d9dac; border-color: #dfe6ee; cursor: not-allowed; }
.order-turn-hint { display: block; margin-top: 9px; color: #8192a3; font-size: 10px; line-height: 1.6; }
.order-queue { max-height: 510px; overflow-y: auto; margin: 0; padding: 8px 12px 12px; list-style: none; scrollbar-width: thin; }
.queue-person { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 12px 6px; border-bottom: 1px solid #edf1f6; }
.queue-position { display: grid; place-items: center; width: 24px; height: 24px; color: var(--centre); background: var(--centre-wash); border-radius: 7px; font-size: 10px; font-weight: 800; }
.queue-person-details { min-width: 0; }
.queue-person-details b { display: block; color: var(--centre); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.order-yellow-card { display: inline-block; width: 11px; height: 15px; margin-left: 7px; border: 1px solid #c39212; border-radius: 2px; background: #f2c230; box-shadow: 0 1px 2px #946b1726; vertical-align: -2px; }
.queue-person-details small { display: block; margin-top: 3px; font-size: 9px; color: #8b9aa9; }
.queue-status { color: #8b9aa9; font-size: 9px; }
.queue-person.is-current { border-radius: 9px; background: var(--centre-wash); }
.queue-person.is-current .queue-status { color: var(--centre); font-weight: 800; }
.queue-person.is-complete .queue-status { color: #438367; }
.queue-person.is-complete .queue-position { color: #408665; background: #edf7f1; }
.order-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 22px; color: #8192a2; font-size: 10px; }
.al-order-page [hidden] { display: none !important; }
@media (max-width:1050px) { .order-workbar { align-items: flex-start; flex-direction: column; gap: 14px; } .order-shell { padding: 25px 20px; } .order-centres { gap: 12px; } .order-turn { padding: 16px; } .queue-person { grid-template-columns: 23px minmax(0,1fr); } .queue-status { grid-column: 2; } }
@media (max-width:760px) { .order-page-head { flex-direction: column; gap: 16px; } .order-centres { grid-template-columns: 1fr; gap: 20px; } .order-rounds { gap: 9px; } .order-round { display: flex; flex-direction: column; padding: 13px 10px; gap: 7px; } .order-round-number { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; } .order-round b { font-size: 12px; } .order-round small, .order-round-progress { font-size: 10px; } .order-identity { flex-direction: column; align-items: flex-start; width: 100%; } .order-identity select { width: 100%; } .queue-person { grid-template-columns: 25px minmax(0,1fr) auto; } .queue-status { grid-column: auto; } .order-turn { min-height: 0; padding: 20px; } .order-queue { max-height: 400px; } }
@media (max-width:420px) { .order-shell { padding: 24px 14px; } .order-intro { font-size: 12px; } .order-rounds { gap: 7px; } .order-round { padding: 12px 8px; } .order-round small { min-height: 28px; } .order-round-progress { font-size: 9px; } .order-workbar h2 { font-size: 17px; } .order-account { flex-wrap: wrap; } }
@media (prefers-reduced-motion:reduce) { .order-centre-progress span { transition: none; } }