:root{--app-bg:#edf4ee;--ink:#102820;--muted:#64756e;--surface:#fbfdf9;--line:#cedbd1;--side:#102820;--side-ink:#f7fff6;--side-active:#baff3518;--accent:#baff35;--accent-ink:#102820;--soft:#e1ebe3;--radius:14px}.queue-hero{display:grid;grid-template-columns:210px 1fr 250px;background:#102820;color:#fff;border-radius:26px;overflow:hidden;margin-bottom:18px}.ticket-no{padding:28px;background:#baff35;color:#102820;display:flex;flex-direction:column;justify-content:center}.ticket-no strong{font-size:4rem;line-height:1.1}.queue-status{padding:28px}.live{display:flex;align-items:center;gap:8px;font-size:.7rem}.live i{width:8px;aspect-ratio:1;border-radius:50%;background:#baff35;box-shadow:0 0 0 6px #baff3520}.queue-status h3{font-size:1.8rem;margin:.7em 0 .2em}.queue-track{position:relative;height:52px;margin:25px 0}.queue-track>i{position:absolute;height:3px;background:#ffffff28;left:0;right:0;top:24px}.queue-track b{position:absolute;top:9px;width:34px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#40534b;font-size:.65rem}.q1{left:0}.q2{left:30%}.q3{left:60%}.q4{right:0}.queue-track .done{background:#fff;color:#102820}.queue-track .you{background:#baff35;color:#102820;box-shadow:0 0 0 7px #baff3520}.queue-actions{display:flex;gap:8px}.queue-actions button{background:transparent;color:#fff;border:1px solid #ffffff40;border-radius:8px;padding:8px 11px}.queue-hero>aside{background:#1c392f;padding:28px;display:flex;flex-direction:column;justify-content:center}.queue-hero>aside span{opacity:.55;font-size:.7rem}.queue-hero>aside b{font-size:1.2rem;margin-top:10px}.queue-hero>aside a{margin-top:20px;color:#baff35;font-size:.8rem}.text-button{border:0;background:transparent;cursor:pointer}.date-box{width:48px;border:1px solid #cedbd1;border-radius:10px;text-align:center;padding:4px}.date-box b,.date-box small{display:block}.calendar-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:18px}.calendar-strip button{border:1px solid #cedbd1;background:#fbfdf9;border-radius:12px;padding:14px}.calendar-strip button small,.calendar-strip button b{display:block}.calendar-strip button b{font-size:1.5rem}.calendar-strip .active{background:#102820;color:#fff}.appointment-card{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:center}.appointment-card time{font-size:2rem;font-weight:800}.place-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.place-letter{width:70px;aspect-ratio:1;border-radius:18px;background:#baff35;display:grid;place-items:center;font-size:2rem;font-weight:800}.place-letter.blue{background:#92d6ff}.setting{min-width:min(500px,90vw);display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cedbd1;padding:18px 0}.switch{width:48px;height:27px;border:0;border-radius:99px;background:#cedbd1;padding:3px}.switch i{display:block;width:21px;aspect-ratio:1;border-radius:50%;background:#fff;transition:.2s}.switch.is-on{background:#102820}.switch.is-on i{transform:translateX(21px)}html[dir=rtl] .switch.is-on i{transform:translateX(-21px)}@media(max-width:1050px){.queue-hero{grid-template-columns:180px 1fr}.queue-hero>aside{grid-column:1/-1}}@media(max-width:650px){.queue-hero{grid-template-columns:1fr}.ticket-no{min-height:160px}.queue-hero>aside{grid-column:auto}.appointment-card{grid-template-columns:1fr}.place-grid{grid-template-columns:1fr}.calendar-strip{overflow:auto;grid-template-columns:repeat(5,90px)}}
