:root{--ink:#12346b;--blue:#134caa;--muted:#5b789d;--line:#d5e5f5;--orange:#d99528}
.participant,.screen{background:#eaf6ff;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;isolation:isolate}
.participant::before,.screen::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('https://bue-1411725721.cos.ap-guangzhou.myqcloud.com/quiz-system/assets/07cfb526161c931d-mobile-background.webp') center bottom/100% 100% no-repeat}
.screen::before{background-image:url('https://bue-1411725721.cos.ap-guangzhou.myqcloud.com/quiz-system/assets/9fa43b177ee8a4fe-screen-background.webp')}
.participant .topbar,.screen .topbar{border:0;max-width:none;padding:0 5%;height:66px;background:transparent}
.campaign-brand{font-family:KaiTi,"STKaiti",serif;font-weight:700;font-size:23px;letter-spacing:3px;color:#cb383b;line-height:1.1;display:inline-block;white-space:nowrap}
.campaign-brand small{font-family:Arial,sans-serif;font-size:7px;letter-spacing:2.4px;color:#244d77;display:block;margin-top:7px}
.event-label{font-size:11px;color:#1c5184;letter-spacing:2px}
.campaign-heading{text-align:center;padding:12px 20px 20px;max-width:660px;margin:auto}
.campaign-heading>p{font-size:13px;letter-spacing:2px;margin:0 0 12px;color:#22568d;font-weight:600}
.campaign-heading h1{font-size:38px;line-height:1.3;margin:0 0 10px;font-weight:900;letter-spacing:1px;color:#073674;text-shadow:1px 2px 0 #fff,-1px -1px 0 #fff,0 3px 8px #2876b229}
.campaign-heading h1 span{margin-left:9px}
.campaign-subtitle{font-size:12px;color:#22568d;font-weight:600}
.participant .phone{max-width:520px;margin:0 auto 32px;padding:0 22px;min-height:0}
.participant .entry-heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px;margin:6px 0 14px;gap:10px}
.entry-heading h2{font-size:19px;margin:0}.entry-heading p{font-size:11px;color:var(--muted);margin:0}
.participant .rules{background:#ffffffa8;border:1px solid #ffffffdf;border-radius:15px;padding:16px 0;margin:0 0 16px;box-shadow:0 8px 24px #4278ad08}
.participant .rules>div{text-align:center;padding:0;border-color:#cbdff3}
.participant .rules strong{font-size:26px;color:#134c93;line-height:1.2}.participant .rules small{font-size:11px;font-weight:500}.participant .rules span{font-size:10px;margin-top:5px}
.participant .panel{border:1px solid #ffffff;background:#ffffffed;box-shadow:0 14px 40px #275e9620;border-radius:18px;padding:22px}
.participant label{font-size:13px;margin-bottom:16px}.participant input{margin-top:8px;padding:12px 14px;background:#f5faff;border-color:#d1e2f3;font-size:14px}
.participant .hint{font-size:11px;line-height:1.8}.participant form .hint{margin:6px 0 14px}
.participant .primary{background:linear-gradient(110deg,#0b4197,#2268c7);box-shadow:0 5px 14px #1653a62a;border-radius:10px;min-height:47px;padding:12px 18px;font-size:14px}
.participant .secondary{background:#e9f2fc;color:#315c91;font-size:14px}
.participant footer{border:0;text-align:center;justify-content:center;padding:6px 20px 140px;color:#4b7095;font-size:9px;letter-spacing:.6px}
.participant[data-stage=active] .campaign-heading,.participant[data-stage=submitted] .campaign-heading{display:none}
.participant[data-stage=active] .phone,.participant[data-stage=submitted] .phone{background:#ffffffeb;border:1px solid #fff;box-shadow:0 16px 45px #2b679925;border-radius:20px;padding:22px;margin-top:10px;margin-bottom:22px;max-width:510px}
.participant .exam-meta{font-size:13px}.participant .exam-meta small{font-size:10px;max-width:290px;display:block;overflow-wrap:anywhere}
.participant .clock{font-size:23px;background:#e6f1ff;color:#124c98;border:1px solid #cdddff;padding:8px 12px}
.participant .clock.urgent{background:#fff0ed;color:#b63828;border-color:#f5d1c8}
.participant .progress{margin:18px 0 22px;height:4px;background:#dfeafa}.participant .question-meta{margin-bottom:14px;font-size:11px}
.participant .tag{background:#e6f0ff;color:#1c579f;font-size:11px;padding:5px 10px}.participant .phone h2{font-size:20px;line-height:1.65}
.participant .options{margin-top:20px;gap:10px}.participant .option{padding:13px;min-height:59px;border-radius:11px;font-size:14px;background:#fff;border-color:#d2e1f0}.participant .option.selected{background:#e7f1ff;border-color:#3976c3;box-shadow:0 0 0 1px #3976c310}
.participant .option-key{width:28px;height:28px;font-size:13px}.participant .save-status{font-size:10px;margin:15px 0 18px}.participant .answer-map{margin-top:23px;gap:7px}.participant .answer-map button{min-height:29px;font-size:11px}
.participant .waiting{padding-top:2px}.participant .waiting-symbol{width:40px;height:40px;font-size:27px;margin-bottom:12px;background:#e3f0ff99;border:1px solid #ffffffb0}
.participant .waiting h1{font-size:22px;margin:12px 0 8px}.participant .waiting .intro{font-size:12px;margin:0 0 8px;color:#41698f}
.participant .waiting-time{padding:18px 10px;margin:10px 0 18px;border-top:1px solid #bcd4e9;border-bottom:1px solid #bcd4e9;background:linear-gradient(90deg,transparent,#ffffff8a,transparent)}
.participant .waiting-time>span{font-size:10px}.participant .waiting-time strong{font-size:25px;margin-top:10px;color:#123f87}.participant #start-countdown{margin:10px 0 0;min-height:20px;font-size:12px;font-variant-numeric:tabular-nums}
.participant .waiting-rules{padding:18px 20px}.participant .waiting-rules h2{font-size:16px;margin:0 0 10px}.participant .waiting-rules p{font-size:11px;line-height:1.8;margin:8px 0;color:#496482}
.participant .result-icon{width:48px;height:48px;font-size:24px;margin:4px auto 20px}.participant[data-stage=submitted] .phone{text-align:center}.participant[data-stage=submitted] h1{font-size:28px}.participant[data-stage=submitted] .intro{font-size:13px}.participant .score{font-size:86px;margin:24px 0}.participant .score small{font-size:16px}.participant .result-detail{box-shadow:none;background:#eff6ff;border-color:#e0ebf8;padding:10px 15px}.participant .result-detail>div{font-size:12px;padding:12px 0}.participant .eyebrow{font-size:10px;letter-spacing:2px}
.screen .topbar{height:7vh;min-height:40px;padding:0 4.5vw}.screen .campaign-brand{font-size:clamp(16px,1.6vw,29px)}.screen .campaign-brand small{font-size:clamp(5px,.45vw,9px)}
.screen .live{color:#23517e;font-size:clamp(10px,.75vw,15px);background:#ffffff6b;border:1px solid #ffffff90;padding:7px 12px;border-radius:30px}.screen .subtle{color:#23517e;font-size:inherit}
.screen-masthead{text-align:center;margin:0 auto 2.2vh;padding:0 20px}.screen-masthead h1{font-size:clamp(27px,3.5vw,64px);line-height:1.18;font-weight:900;color:#073272;letter-spacing:.12em;margin:0 0 1vh;text-shadow:2px 2px 0 white,-2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white,0 4px 10px #2b6b9e22}.screen-masthead h1 span{margin-left:.6em}
.screen-masthead p{font-size:clamp(12px,1.13vw,23px);font-weight:600;letter-spacing:.2em;color:#1c4c86;margin:0}
.screen .screen-layout{padding:0 8vw;margin:0 auto;max-width:1920px;min-height:0;display:block}.screen .rank-shell{width:100%;background:#ffffffed;border:1px solid #fff;border-radius:18px;box-shadow:0 18px 60px #3777ad25;overflow:hidden}
.screen .board-heading{padding:1.35vh 2vw;margin:0;border-bottom:1px solid #d8e8f7;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(100deg,#eef6ff,#fff)}
.screen .board-heading h2{font-size:clamp(16px,1.45vw,27px);margin:0;line-height:1.5}.screen .board-heading h2 span{font-size:clamp(9px,.7vw,13px);margin-left:12px;padding:5px 9px;border-radius:5px;background:#fff0d6;letter-spacing:1px;color:#a36d17}.screen .board-heading p{font-size:clamp(10px,.8vw,15px);margin:0;color:#547395}
.screen table{width:100%;table-layout:fixed}.screen th{font-size:clamp(11px,.9vw,17px);padding:1vh 1.5vw;color:#537698;background:#f4f9ff;text-align:center;letter-spacing:.1em;border-color:#e0ebf7}
.screen th:nth-child(1){width:11%}.screen th:nth-child(2){width:18%;text-align:left}.screen th:nth-child(3){width:39%;text-align:left}.screen th:nth-child(4){width:16%}.screen th:nth-child(5){width:16%}
.screen td{height:5vh;padding:.5vh 1.5vw;border-color:#e4edf6;text-align:center;font-size:clamp(13px,1.2vw,23px);line-height:1.3}.screen tbody tr:last-child td{border-bottom:0}.screen tbody tr:nth-child(1){background:#fff7e8}.screen tbody tr:nth-child(2){background:#f2f7ff}.screen tbody tr:nth-child(3){background:#faf5f0}
.screen .person-name{text-align:left;color:#183d73}.screen .person-name strong{font-size:clamp(14px,1.25vw,24px);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.screen .person-unit{text-align:left;font-size:clamp(11px,1.02vw,20px);color:#587293;overflow-wrap:anywhere}
.screen .rank{font-variant-numeric:tabular-nums;font-size:clamp(15px,1.4vw,27px);font-weight:700;display:inline-grid;place-items:center;border-radius:9px;width:2.7vw;min-width:30px;height:3.5vh;min-height:25px;color:#7792af}.screen .rank-1{background:linear-gradient(135deg,#f9df9a,#d8a941);color:#714900;box-shadow:0 3px 8px #d3ad5b30}.screen .rank-2{background:linear-gradient(135deg,#ecf4ff,#c3d4e9);color:#48658b}.screen .rank-3{background:linear-gradient(135deg,#f7dfcc,#ddb191);color:#86512b}
.screen .points{font-size:clamp(19px,1.7vw,34px);color:#124d9e}.screen .points small,.screen .elapsed small{font-size:clamp(9px,.65vw,14px);margin-left:3px;color:#6b829d}.screen .elapsed{font-size:clamp(13px,1.2vw,24px);font-variant-numeric:tabular-nums;color:#466388}
.screen .empty{height:51vh;background:#ffffffa8!important;color:#6384a6;text-align:center;font-size:17px}.screen .empty strong{font-size:clamp(17px,1.5vw,28px);font-weight:500;display:block;color:#42698f;margin:10px 0}.screen .empty-symbol{display:block;font-size:58px;line-height:1.2;color:#7ba9d4}.screen .empty small{font-size:clamp(10px,.9vw,17px);margin-top:12px}
.screen footer{border:0;max-width:1920px;margin:0 auto;padding:1.2vh 8vw 0;font-size:clamp(9px,.7vw,13px);color:#52779d;letter-spacing:1px;background:transparent}
@media(min-width:750px){.participant::before{background-image:url('https://bue-1411725721.cos.ap-guangzhou.myqcloud.com/quiz-system/assets/9fa43b177ee8a4fe-screen-background.webp')}.participant .campaign-heading{padding-top:8px;padding-bottom:20px}.participant .phone{max-width:500px}.participant footer{padding-bottom:110px}}
@media(max-width:650px){.participant .topbar{height:56px;padding:0 22px}.campaign-brand{font-size:19px;letter-spacing:2px}.campaign-brand small{font-size:6px;letter-spacing:1.5px;margin-top:5px}.event-label{font-size:10px;letter-spacing:1px}.campaign-heading{padding:10px 12px 19px}.campaign-heading>p{font-size:11px;letter-spacing:1px;margin-bottom:11px}.campaign-heading h1{font-size:30px;letter-spacing:0;margin-bottom:9px}.campaign-heading h1 span{margin-left:6px}.campaign-subtitle{font-size:10px}.participant .phone{padding:0 20px}.participant .entry-heading h2{font-size:17px}.participant .entry-heading p{font-size:10px}.participant .panel{padding:20px}.participant[data-stage=active] .phone,.participant[data-stage=submitted] .phone{margin:8px 14px 20px;padding:18px 16px;max-width:none}.participant .waiting-time strong{font-size:23px}.participant .waiting-rules{padding:16px 20px}.participant .waiting .hint{font-size:10px}.participant .exam-meta small{max-width:210px}.participant .answer-map{gap:5px}.participant footer{padding-bottom:130px}.screen .topbar{padding:0 5vw}.screen .campaign-brand{font-size:16px}.screen-masthead{margin-top:10px;margin-bottom:20px}.screen-masthead h1{font-size:27px;letter-spacing:0}.screen-masthead p{font-size:10px;letter-spacing:1px}.screen .screen-layout{padding:0 4vw}.screen .board-heading{padding:12px;flex-wrap:wrap;gap:7px}.screen .board-heading h2{font-size:16px}.screen .board-heading p{font-size:9px}.screen th,.screen td{padding:8px 5px}.screen th{font-size:10px}.screen .person-name strong{font-size:12px}.screen .person-unit{font-size:10px}.screen .elapsed{font-size:11px}.screen .points{font-size:16px}.screen .points small,.screen .elapsed small{font-size:8px}.screen .empty{height:45vh}.screen footer{padding:12px 5vw}.screen .live{padding:5px 7px;font-size:9px;gap:5px}.screen .subtle{margin-left:3px}}
@media(max-width:360px){.campaign-heading h1{font-size:27px}.entry-heading p{font-size:9px}.participant .phone{padding:0 14px}.participant .waiting-time strong{font-size:21px}.participant .option{font-size:13px}}
.screen td{height:4.7vh}.screen footer{width:50vw;max-width:none;padding:1.2vh 0 0;margin:0 auto}@media(max-width:650px){.screen footer{width:90vw;padding:12px 0}}
/* Keep the decorative road below long mobile content rather than behind its text. */
.participant{position:relative;min-height:100svh}.participant::before{position:absolute}.participant .waiting>.hint{background:#ffffffde;border-radius:10px;padding:9px 12px}
.participant footer{padding-bottom:180px}
.screen .points{line-height:1.05}