*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f3f6f9;color:#18212b}.landing,.display-body{background:#102a43;color:#fff}.container{max-width:1100px;margin:0 auto;padding:30px 18px}.narrow{max-width:600px}.card{background:#fff;border-radius:18px;padding:28px;margin:15px 0;box-shadow:0 8px 30px rgba(0,0,0,.08)}.center{text-align:center}.logo{font-weight:800;letter-spacing:3px;font-size:26px}.logo.small{font-size:20px}.landing .card{max-width:520px;margin:12vh auto}.landing .card{color:#18212b}h1{margin:12px 0 8px}h2{margin-top:0}.btn{display:inline-block;border:0;border-radius:12px;padding:14px 22px;background:#1677ff;color:white;text-decoration:none;font-weight:700;cursor:pointer;margin:5px;font-size:16px}.btn.big{font-size:20px;padding:18px 30px;width:100%}.btn.warning{background:#e69b00}.btn.secondary{background:#667085}.btn.danger{background:#d92d20}.input{display:block;width:100%;padding:14px;border:1px solid #ccd3db;border-radius:10px;margin:8px 0 16px;font-size:16px}label{font-weight:700}.link{color:#1677ff;text-decoration:none;display:inline-block;margin:10px}.muted{color:#667085}.queue-info{background:#eef5ff;border-radius:14px;padding:18px;margin:20px 0}.queue-info strong{display:block;font-size:56px;margin:10px}.ticket-number,.display-number{font-size:90px;font-weight:800;letter-spacing:5px;margin:20px}.notice,.success,.error{padding:14px;border-radius:10px;margin:15px 0}.notice{background:#fff7e6}.success{background:#e9f8ef;color:#087443}.error{background:#fdecec;color:#a21c1c}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.actions{display:flex;flex-wrap:wrap}.actions .btn{flex:1;min-width:180px}table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #eee;text-align:left}.top{display:flex;justify-content:space-between;align-items:center}.display-body{min-height:100vh}.display-header{display:flex;justify-content:space-between;align-items:center;padding:25px 40px;font-size:20px}.display-main{text-align:center;padding:7vh 20px}.display-huge{font-size:clamp(120px,25vw,300px);font-weight:900;line-height:1}.next-label{font-size:clamp(25px,4vw,55px);margin:25px}.waiting-big{font-size:30px}@media(max-width:700px){.grid{grid-template-columns:1fr}.ticket-number,.display-number{font-size:70px}.display-header{padding:15px;flex-direction:column;gap:8px}.container{padding:15px}}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-box{background:#fff;color:#18212b;border-radius:18px;padding:28px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}.confirm-word{display:inline-block;padding:8px 12px;border-radius:7px;background:#fdecec;color:#a21c1c;font-weight:800;letter-spacing:1px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}



                .ticker {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 55px;
            background: #000;
            color: #fff;
            overflow: hidden;
            display: flex;
            align-items: center;
            z-index: 9999;
            white-space: nowrap;
        }
        
        .ticker-text {
            display: inline-block;
            padding-left: 100%;
            font-size: 38px;
            font-weight: bold;
            animation: ticker 120s linear infinite;
        }
        
        @keyframes ticker {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }


.current-qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

.qr-block {
    width: 400px;
    flex-shrink: 0;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}

.qr-block img {
    width: 200px;
    height: 200px;
    padding: 8px;
    background: #fff;
    border-radius: 10px;
    display: block;
    margin: 0 auto 10px;
}

@media (max-width: 700px) {
    .current-qr-container {
        flex-direction: column;
        gap: 15px;
    }
}