*{box-sizing:border-box}
:root{
 --blue:#00178A;--blue2:#122963;--lime:#E1FE02;--bg:#eef3fa;
 --ink:#122963;--muted:#70809e;--line:#dfe6f2;--white:#fff
}
html,body{margin:0;min-height:100%;font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink)}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
.page{min-height:100vh;padding:22px}
.layout{
 width:min(1240px,100%);min-height:calc(100vh - 44px);margin:auto;
 display:grid;grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);
 overflow:hidden;border-radius:30px;background:#fff;
 box-shadow:0 25px 70px rgba(18,41,99,.12)
}
.intro{
 position:relative;display:flex;flex-direction:column;min-width:0;
 padding:30px 42px 24px;background:
 radial-gradient(circle at 15% 20%,rgba(225,254,2,.08),transparent 180px),
 linear-gradient(145deg,#00178A,#122963 78%);
 color:#fff
}
.brand{display:flex;align-items:center;gap:12px}.logo{width:56px;height:56px;border-radius:15px;background:#fff;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.6)}.logo img{width:100%;height:100%;object-fit:contain}.brand b{display:block;font:800 15px/1.1 "Manrope",sans-serif}.brand small{display:block;margin-top:4px;color:rgba(255,255,255,.62);font-size:10px}
.intro-body{max-width:580px;margin:auto 0}
.eyebrow{display:inline-block;color:var(--lime);font:800 9px/1 "Manrope",sans-serif;letter-spacing:.17em;text-transform:uppercase}
.intro h1{margin:13px 0 13px;font:800 clamp(48px,6vw,76px)/.94 "Manrope",sans-serif;letter-spacing:-.055em}.intro h1 span{color:var(--lime)}.intro-body>p{max-width:540px;margin:0;color:rgba(255,255,255,.73);font-size:13px;line-height:1.75}
.queue-visual{margin-top:32px;width:min(470px,100%);padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.queue-head{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.55);font-size:8px;font-weight:800;letter-spacing:.12em}.live{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.8)}.live i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.ticket-row{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;margin-top:8px;padding:12px 13px;border-radius:13px;background:rgba(255,255,255,.06)}.ticket-row.current{background:#fff;color:var(--blue)}.ticket-row.muted{opacity:.62}.ticket-no{font:800 25px/1 "Manrope",sans-serif;letter-spacing:-.04em}.ticket-meta{display:flex;flex-direction:column;gap:4px;font-size:9px;color:rgba(255,255,255,.67)}.current .ticket-meta{color:#71809c}.ticket-meta b{font-size:10px;color:inherit}
.intro-footer{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.42);font-size:9px}
.actions{background:#fff;min-width:0;display:flex}.actions-inner{width:min(100%,560px);margin:auto;padding:42px}.actions-heading h2{margin:11px 0 7px;font:800 31px/1.12 "Manrope",sans-serif;letter-spacing:-.04em}.actions-heading p{margin:0;color:var(--muted);font-size:12px}
.action-stack{display:grid;gap:12px;margin-top:30px}.action-card{position:relative;display:grid;grid-template-columns:58px 1fr 28px;gap:16px;align-items:center;padding:22px 20px;border:1px solid var(--line);border-radius:19px;text-decoration:none;background:#fff;transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease}.action-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,41,99,.09);border-color:#cbd6e8}.action-card.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 14px 28px rgba(0,23,138,.16)}.action-card.primary:hover{box-shadow:0 17px 34px rgba(0,23,138,.23)}.action-card.compact{padding-top:18px;padding-bottom:18px}
.action-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;position:relative;background:#eef3ff}.primary .action-icon{background:rgba(255,255,255,.13)}.action-label{font:800 8px/1 "Manrope",sans-serif;letter-spacing:.14em;color:var(--blue)}.primary .action-label{color:var(--lime)}.action-copy h3{margin:7px 0 5px;font:800 20px/1.05 "Manrope",sans-serif;letter-spacing:-.025em}.action-copy p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.45}.primary .action-copy p{color:rgba(255,255,255,.72)}.arrow{font:700 25px/1 "Manrope";color:var(--blue)}.primary .arrow{color:var(--lime)}
.qr-icon span{position:absolute;width:13px;height:13px;border:3px solid var(--blue)}.primary .qr-icon span{border-color:var(--lime)}.qr-icon span:nth-child(1){left:13px;top:13px;border-right:0;border-bottom:0}.qr-icon span:nth-child(2){right:13px;top:13px;border-left:0;border-bottom:0}.qr-icon span:nth-child(3){left:13px;bottom:13px;border-right:0;border-top:0}.qr-icon span:nth-child(4){right:13px;bottom:13px;border-left:0;border-top:0}.qr-icon i{width:10px;height:10px;border-radius:2px;background:var(--blue)}.primary .qr-icon i{background:var(--lime)}
.monitor-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.monitor-icon span{width:30px;height:21px;border:3px solid var(--blue);border-radius:4px}.monitor-icon b{width:18px;height:3px;border-radius:999px;background:var(--blue);position:relative}.monitor-icon b:after{content:"";position:absolute;width:26px;height:2px;left:50%;top:4px;transform:translateX(-50%);background:var(--blue);border-radius:999px}
.staff-icon{display:flex;align-items:center;justify-content:center;gap:6px}.staff-icon span{width:16px;height:16px;border:3px solid var(--blue);border-radius:50%;position:relative}.staff-icon span:after{content:"";position:absolute;width:24px;height:12px;left:50%;top:13px;transform:translateX(-50%);border:3px solid var(--blue);border-bottom:0;border-radius:14px 14px 0 0}.staff-icon i{display:none}
.tip{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:14px;border-radius:15px;background:#f5f8fd}.tip-icon{width:23px;height:23px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none;color:var(--blue);font-size:12px;font-weight:900}.tip b{display:block;font-size:11px}.tip span{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.45}
@media(max-width:900px){
 body{background:#fff}.page{padding:0}.layout{min-height:100vh;border-radius:0;grid-template-columns:1fr}.intro{padding:24px 24px 18px;min-height:55vh}.intro-body{margin:48px 0 36px}.intro h1{font-size:54px}.queue-visual{margin-top:24px}.actions-inner{width:100%;padding:30px 24px 34px}.action-stack{margin-top:22px}
}
@media(max-width:520px){
 .brand .logo{width:48px;height:48px;border-radius:14px}.brand b{font-size:14px}.brand small{font-size:9px}
 .intro{min-height:0;padding:18px 18px 18px}.intro-body{margin:36px 0}.intro h1{font-size:48px}.intro-body>p{font-size:11px;line-height:1.65}.queue-visual{margin-top:20px;padding:12px}.ticket-row{grid-template-columns:64px 1fr;padding:10px}.ticket-no{font-size:20px}.intro-footer{font-size:8px}
 .actions-inner{padding:28px 18px 26px}.actions-heading h2{font-size:25px}.action-card{grid-template-columns:50px 1fr 20px;padding:17px 15px;border-radius:16px}.action-card.compact{padding-top:15px;padding-bottom:15px}.action-icon{width:50px;height:50px;border-radius:15px}.action-copy h3{font-size:17px}.action-copy p{font-size:9.5px}.arrow{font-size:22px}.tip{padding:12px}
}