*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#10213d}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:100%;max-width:720px;background:#fff;border-radius:24px;padding:32px;box-shadow:0 14px 40px rgba(16,33,61,.1)}
h1,h2{margin-top:0}.muted{color:#6d7d93}
.grid{display:grid;gap:14px}.button{display:block;width:100%;border:0;border-radius:16px;padding:17px 20px;background:#1267e8;color:#fff;font-size:20px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.secondary{background:#eaf1fb;color:#10213d}.danger{background:#c62828}
.doctor{border:2px solid #e4ebf5;border-radius:16px;padding:18px;background:#fff;text-align:left;cursor:pointer;font-size:18px}
.doctor.active{border-color:#1267e8;background:#f6f9ff}
.ticket{font-size:78px;font-weight:900;text-align:center;margin:18px 0}.status{text-align:center;font-size:20px}
.display{min-height:100vh;background:#081a34;color:#fff;padding:36px}.display-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.display-card{background:#10294f;border-radius:22px;padding:26px}.display-ticket{font-size:72px;font-weight:900;margin:10px 0}.room{font-size:28px}
.qr{display:flex;justify-content:center;margin:20px 0}.small{font-size:13px;word-break:break-all}
.section{margin-top:28px;padding-top:24px;border-top:1px solid #e5ebf3}
@media(max-width:800px){.display-grid{grid-template-columns:1fr}.display-ticket{font-size:56px}.card{padding:22px}}
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{position:absolute;left:0;top:0;width:100%;text-align:center}}

.queue-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.queue-summary>div{background:#f6f9fd;border:1px solid #e4ebf5;border-radius:18px;padding:18px;text-align:center}
.queue-count{font-size:54px;font-weight:900;line-height:1;margin-top:8px}
.current-small{font-size:42px;font-weight:900;line-height:1;margin-top:8px}
.waiting-list{display:grid;gap:10px}
.waiting-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid #e4ebf5;border-radius:14px;background:#fff}
.waiting-code{font-size:26px;font-weight:800}
.waiting-time{font-size:16px;color:#6d7d93}
@media(max-width:600px){.queue-summary{grid-template-columns:1fr}.queue-count{font-size:46px}.current-small{font-size:38px}}

.patient-status-box{margin:18px 0;padding:20px;border-radius:18px;background:#f6f9fd;border:1px solid #e4ebf5;text-align:center}
.ahead-count{font-size:54px;font-weight:900;line-height:1.1;margin:6px 0}
.patient-next{font-weight:700}
.patient-called{font-weight:800;font-size:24px}

.brand-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.brand-logo{width:165px;max-width:50%;height:auto}
.brand-name{font-size:24px;font-weight:900;letter-spacing:.2px}
.brand-tagline{font-size:14px;color:#6d7d93;margin-top:3px}
.ticket-brand{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 16px;background:#f6f9fd;border:1px solid #e4ebf5;border-radius:16px;margin:14px 0 20px}
.ticket-brand-logo{width:120px;height:auto}
.display-brand{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.display-logo{width:190px;height:auto;background:#fff;border-radius:16px;padding:10px}
.display-clinic{font-size:34px;font-weight:900}
.display-tagline{font-size:18px;color:#b8c8df;margin-top:4px}
@media(max-width:700px){
  .brand-head{align-items:flex-start;flex-direction:column}
  .brand-logo{max-width:70%;width:150px}
  .ticket-brand{flex-direction:column;text-align:center}
  .display-brand{align-items:flex-start;flex-direction:column}
  .display-logo{width:155px}
  .display-clinic{font-size:26px}
}