:root { font-family: "Noto Sans TC", system-ui, sans-serif; color: #123b54; background: #f2f7f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.queue-page { min-height: 100svh; display: grid; align-content: center; gap: 1.4rem; padding: 2rem 1.25rem; max-width: 680px; margin: auto; }
.brand, footer { color: #5b6c77; font-size: .95rem; }
.brand { font-weight: 700; letter-spacing: .08em; }
.queue-card, .notice { border: 1px solid #d6e0e5; background: #fff; border-radius: 18px; padding: clamp(1.5rem, 6vw, 3rem); box-shadow: 0 10px 30px rgba(18,59,84,.07); }
.eyebrow { color: #237d83; font-size: .9rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .4rem; }
h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); line-height: 1.2; margin: 0 0 1.2rem; }
.status-chip { display: inline-block; color: #17646a; background: #eaf3f4; border-radius: 999px; padding: .4rem .75rem; font-size: .9rem; font-weight: 600; }
.number-panel { margin: 2rem 0; padding: 1.5rem; text-align: center; border-radius: 14px; color: #fff; background: #123b54; }
.number-label { display: block; font-size: 1rem; opacity: .85; }
.queue-number { display: inline-block; font-size: clamp(4rem, 23vw, 7rem); line-height: 1; margin: .4rem .2rem 0; }
.number-suffix { font-size: 1.4rem; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
.details div { padding-top: 1rem; border-top: 1px solid #d6e0e5; }
dt { color: #5b6c77; font-size: .82rem; } dd { margin: .25rem 0 0; font-size: .95rem; }
.notice { background: #eaf3f4; box-shadow: none; padding: 1.25rem 1.5rem; } .notice h2 { font-size: 1.1rem; margin: 0 0 .35rem; color: #237d83; } .notice p { color: #38505e; line-height: 1.7; margin: 0; } footer { text-align: center; }
@media (max-width: 390px) { .details { grid-template-columns: 1fr; } .number-panel { padding: 1.25rem .75rem; } }