@font-face{font-family:FlagshipFallback;src:local("PingFang HK")}
*{box-sizing:border-box}
 :root{--red:#CF2030;--red-dark:#CF2030;--ink:#000000;--muted:#64666A;--line:#F2F2F2;--bg:#F2F2F2;--stage-accent:#FFFFFF}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Arial,FlagshipFallback,"Noto Sans TC",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button{transition:background .18s,transform .18s,border-color .18s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #CF2030;outline-offset:4px}
button:hover:not(:disabled){filter:brightness(.97)}
button:active:not(:disabled){transform:translateY(1px)}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sprite{display:none}
.header{height:132px;background:#FFFFFF;border-bottom:1px solid var(--line)}
.header-inner{max-width:1320px;margin:auto;padding:0 44px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;flex:0 0 auto;text-decoration:none}
.tabs{padding:5px;display:flex;gap:3px;background:#F2F2F2;border:1px solid #F2F2F2;border-radius:12px}
.tab{background:transparent;border:0;padding:10px 18px;border-radius:8px;display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;font-size:13px}
.tab.active{background:#FFFFFF;box-shadow:0 2px 5px #00000008;color:var(--red)}
.tab svg{width:17px;height:17px}
.tab span{font-size:10px;padding:2px 5px;border-radius:4px;background:#F2F2F2;color:#64666A}
.header-actions{display:flex;align-items:center;gap:12px}
.utility{border:0;background:none;display:flex;align-items:center;gap:8px;font-size:12px;color:#64666A}
.utility svg{width:18px}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:8px;color:#64666A}
.sound-bars{display:flex;align-items:center;gap:2px;height:16px}
.sound-bars b{height:6px;width:2px;background:#CF2030}
.sound-bars b:nth-child(2){height:12px}
.sound-bars.playing b{animation:bars .7s ease-in-out infinite alternate}
.sound-bars.playing b:nth-child(2){animation-delay:.3s}
.sound-bars.playing b:nth-child(3){animation-delay:.15s}
@keyframes bars{to{height:3px}
}
main{max-width:1320px;margin:auto;padding:0 44px}
.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:43px 0 30px}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2px;color:#64666A;font-weight:700}
.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--red)}
h1{font-size:35px;letter-spacing:-1px;font-weight:700;margin:13px 0 10px;line-height:1.4}
h1 span{color:var(--red)}
.intro p{color:var(--muted);margin:0;font-size:12px;letter-spacing:.5px}
.stats{display:flex;align-items:center;gap:30px;text-align:center;padding-top:19px}
.stats strong{font-size:34px;font-weight:400;display:block;font-variant-numeric:tabular-nums;line-height:1.2}
.stats span{font-size:11px;color:var(--muted);display:block;margin-top:7px;letter-spacing:.5px}
.stats .stat-divider{width:1px;height:37px;background:#C8C8C8;margin:0}
.draw-grid{display:grid;grid-template-columns:minmax(0,1fr) 334px;gap:22px}
.stage{isolation:isolate;position:relative;overflow:hidden;border-radius:18px;min-height:461px;color:#FFFFFF;background:#CF2030;display:flex;flex-direction:column;box-shadow:0 10px 28px #0000000d}
.stage-top,.stage-bottom{z-index:2;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:25px 28px;color:#F2F2F2;font-size:9px;letter-spacing:1.5px}
.stage-top>span:first-child{display:flex;align-items:center;font-weight:400;gap:8px;color:#FFFFFF}
.stage-top i{width:5px;height:5px;background:#FFFFFF;border-radius:50%}
.stage-top>span:last-child{letter-spacing:.6px;font-size:10px}
.stage-content{flex:1;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 38px 25px;z-index:2;min-height:330px}
.trophy{width:126px;height:118px;margin-bottom:10px}
.trophy>svg{width:100%;height:100%;stroke:none;filter:drop-shadow(0 6px 18px #C8C8C812)}
.stage-eyebrow{color:var(--stage-accent);font-size:9px;letter-spacing:3px;margin:7px 0 12px}
#winner-display{font-size:43px;line-height:1.4;font-weight:400;letter-spacing:3px;margin:0;max-width:100%;overflow-wrap:anywhere}
#stage-message{font-size:12px;color:#FFFFFF;letter-spacing:.8px;margin:12px 0 0}
.stage-bottom{padding:20px 28px;border-top:1px solid #FFFFFF33;font-size:8px}
.stage-bottom>span:first-child{display:flex;align-items:center;gap:5px;letter-spacing:.5px;font-size:10px}
.stage-bottom svg{width:13px;height:13px;color:#FFFFFF}
.orbits{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none}
.orbits i{position:absolute;border:1px solid #FFFFFF20;border-radius:50%;width:330px;height:330px}
.orbits i:nth-child(2){width:480px;height:480px}
.orbits i:nth-child(3){width:650px;height:650px}
.spark{position:absolute;color:#FFFFFFbb;z-index:1;font-size:24px;line-height:1}
.spark-a{top:30%;left:18%;font-size:17px}
.spark-b{top:23%;right:18%;font-size:33px}
.spark-c{bottom:27%;right:13%;font-size:13px}
.control-card,.import-card,.member-card{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:24px}
.control-heading{display:flex;gap:12px;align-items:center;margin-bottom:25px}
.little-icon{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:12px;background:#F2F2F2;color:var(--red);flex-shrink:0}
.control-heading h2{font-size:17px;font-weight:700;margin:0 0 5px}
.control-heading p{font-size:11px;color:var(--muted);margin:0}
label{display:block;font-size:12px;font-weight:700;margin-bottom:9px}
label>span{font-size:10px;font-weight:400;color:#C8C8C8;margin-left:5px}
input,textarea,select{width:100%;border:1px solid #F2F2F2;background:#FFFFFF;color:var(--ink);border-radius:8px;padding:12px;outline-offset:1px;font-size:12px}
input::placeholder,textarea::placeholder{color:#C8C8C8}
select{padding-right:8px;height:43px}
textarea{resize:vertical;min-height:135px;line-height:1.8}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.auto-note{display:flex;align-items:center;gap:10px;background:#F2F2F2;padding:13px 12px;border-radius:8px;margin:0 0 21px}
.check-dot{width:20px;height:20px;background:#F2F2F2;border-radius:50%;display:grid;place-items:center;color:#64666A}
.check-dot svg{width:12px}
.auto-note strong{display:block;font-size:11px;font-weight:700;margin-bottom:4px}
.auto-note div>span{color:#64666A;font-size:10px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;border:1px solid transparent;padding:13px 17px;font-weight:700;font-size:12px}
.primary{background:var(--red);color:#FFFFFF;width:100%;box-shadow:0 4px 10px #CF20300a}
.primary:hover{background:var(--red-dark)}
.secondary{background:#FFFFFF;border-color:var(--line);color:#64666A}
.draw-button{height:49px;font-size:14px;justify-content:flex-start;gap:10px}
.draw-button svg{width:18px}
.draw-button svg:last-child{margin-left:auto}
.control-hint{text-align:center;font-size:10px;color:#C8C8C8;margin:11px 0 8px}
.text-button{background:none;border:0;padding:4px 0;color:var(--red);font-size:11px;display:inline-flex;align-items:center;gap:5px}
.text-button svg{width:14px;height:14px}
.demo-trigger{width:100%;justify-content:center;margin-top:8px;font-size:10px;color:#64666A}
.history-section{padding:31px 0 20px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.section-heading h2{font-size:17px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px}
.section-heading h2 span{font-size:10px;font-weight:400;background:#F2F2F2;border-radius:5px;padding:3px 7px;color:#64666A}
.section-heading>div{display:flex;gap:17px}
.muted{color:#64666A}
.empty-history{text-align:center;border:1px dashed #C8C8C8;border-radius:13px;padding:22px;width:100%;min-height:130px}
.empty-history>span{color:#C8C8C8;font-size:25px}
.empty-history p{margin:5px 0 5px;font-size:12px;color:#64666A}
.empty-history small{font-size:10px;color:#C8C8C8}
.history-list{display:flex;flex-wrap:wrap;gap:13px}
.winner-card{display:flex;gap:14px;align-items:center;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:18px;flex:1 1 250px;max-width:calc(33.333% - 9px)}
.winner-medal{display:grid;place-items:center;border-radius:50%;width:37px;height:37px;background:#F2F2F2;color:#64666A;flex-shrink:0;font-size:16px}
.winner-card strong{display:block;font-size:16px;font-weight:700;margin-bottom:6px;overflow-wrap:anywhere}
.winner-card p{margin:0;font-size:11px;color:#64666A;overflow-wrap:anywhere}
.winner-card small{display:block;font-size:9px;color:#C8C8C8;margin-top:6px}
.winner-card div{min-width:0}
footer{display:flex;justify-content:space-between;gap:20px;padding:25px 0 27px;color:#C8C8C8;font-size:9px;letter-spacing:.3px}
footer>span:first-child{display:flex;align-items:center;gap:7px}
.footer-dot{display:block;width:5px;height:5px;background:#64666A;border-radius:50%}
.member-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px}
.member-card{min-height:590px}
.member-summary{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:20px 0 10px;gap:12px}
.member-row{display:flex;align-items:center;border-bottom:1px solid #F2F2F2;gap:12px;min-height:58px}
.member-row label{display:flex;align-items:center;gap:12px;flex:1;min-width:0;margin:0;font-size:14px;font-weight:400}
.member-row input{width:16px;height:16px;accent-color:var(--red);flex-shrink:0}
.member-row .member-name{font-size:14px;color:var(--ink);font-weight:400;margin:0;overflow-wrap:anywhere}
.member-row.won .member-name{color:#C8C8C8}
.member-status{font-size:10px;color:#64666A;flex-shrink:0}
.member-row.won .member-status{color:#64666A}
.member-row .remove-member{border:0;background:transparent;color:#C8C8C8;padding:8px;font-size:17px;flex-shrink:0}
.file-drop{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:1px dashed #C8C8C8;border-radius:10px;position:relative;padding:19px;margin-top:14px;cursor:pointer;background:#F2F2F2;color:#64666A}
.file-drop strong{font-size:11px}
.file-drop>span{margin:0;font-size:10px}
.file-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-drop:focus-within{outline:3px solid #CF2030;outline-offset:3px}
.import-help{font-size:10px;line-height:1.8;color:#64666A;margin:14px 0 17px}
.import-preview{font-size:11px;color:var(--red);line-height:1.6;min-height:18px;margin:13px 0}
.demo-banner{padding:12px 24px;background:#F2F2F2;color:#64666A;font-size:12px;text-align:center;line-height:1.7}
.demo-banner button{border:0;background:none;color:#64666A;font-weight:700;margin-left:12px;font-size:12px}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#000000;color:#FFFFFF;border-radius:10px;box-shadow:0 5px 25px #00000022;padding:14px 22px;font-size:13px;z-index:100;max-width:90%;width:max-content;line-height:1.6}
dialog{border:1px solid var(--line);border-radius:18px;background:#FFFFFF;color:var(--ink);width:min(440px,calc(100% - 40px));padding:30px;box-shadow:0 20px 100px #00000022}
dialog::backdrop{background:#000000aa;backdrop-filter:blur(3px)}
.dialog-close{float:right}
dialog h2{font-size:23px;margin:23px 0 12px}
dialog p{color:var(--muted);line-height:1.9;font-size:13px}
.dialog-actions{display:flex;gap:12px;margin-top:26px}
.dialog-actions button{flex:1;width:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage.drawing .trophy{animation:float .6s ease-in-out infinite alternate}
.stage.drawing #winner-display{color:#FFFFFF}
.stage.celebrate{box-shadow:0 0 0 2px #FFFFFF88,0 10px 28px #CF203026}
.winner-names{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}
.winner-names span{display:block}
.winner-names.multi{font-size:30px!important;letter-spacing:1px!important}
.stage.has-result .trophy{width:92px;height:84px}
.stage.has-result #winner-display{font-size:45px}
.stage.has-result #stage-message{color:#FFFFFF}
.stage.has-result .stage-eyebrow{margin-top:4px}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#confetti i{position:absolute;top:-20px;width:7px;height:12px;animation:fall 3s linear forwards}
@keyframes fall{to{transform:translate(var(--drift),520px) rotate(680deg)}
}
@keyframes float{to{transform:translateY(-6px) rotate(3deg)}
}
body.stage-mode{background:#CF2030}
.stage-mode .header{background:#FFFFFF;border-color:#C8C8C8}
.stage-mode .header-actions .utility{color:#64666A}
.stage-mode .tabs,.stage-mode .intro,.stage-mode footer,.stage-mode .history-section,.stage-mode .demo-trigger{display:none}
.stage-mode main{max-width:none;padding:24px}
.stage-mode .draw-grid{grid-template-columns:minmax(0,1fr) 300px;min-height:calc(100dvh - 180px)}
.stage-mode .stage{min-height:600px}
.stage-mode .control-card{align-self:center}
.stage-mode #winner-display{font-size:clamp(40px,6vw,100px)}
.stage-mode .stage.has-result #winner-display{font-size:clamp(40px,6vw,100px)}
.stage-mode .stage-content{min-height:400px}
.stage-mode .winner-names.multi{font-size:clamp(25px,4vw,60px)!important}
.stage-mode .trophy{width:180px;height:168px}
.stage-mode .stage.has-result .trophy{width:126px;height:118px}
.stage-mode #stage-message{font-size:17px}
.stage-mode .orbits i{width:40vw;height:40vw}
.stage-mode .orbits i:nth-child(2){width:55vw;height:55vw}
.stage-mode .orbits i:nth-child(3){width:70vw;height:70vw}
@media(min-width:1450px){.intro{padding-top:55px;padding-bottom:36px}
.stage{min-height:490px}
.control-card{padding:28px 24px}
.control-heading{margin-bottom:29px}
.auto-note{margin-top:23px}
.history-section{padding-top:37px}
}
@media(max-width:1000px){.header-inner,main{padding-left:24px;padding-right:24px}
.draw-grid{grid-template-columns:minmax(0,1fr) 300px;gap:17px}
.control-card{padding:20px}
.stage-top,.stage-bottom{padding-left:20px;padding-right:20px}
.stage-top>span:last-child{display:none}
.stage-bottom>span:last-child{display:none}
h1{font-size:30px}
.header-inner{gap:12px}
.tab{padding:10px 12px}
.utility{gap:6px}
.sound-bars{display:none}
.member-grid{grid-template-columns:minmax(0,1fr) 330px}
.winner-card{max-width:calc(50% - 7px)}
.stage-mode .stage{min-height:500px}
}
@media(max-width:760px){.header{height:auto}
.header-inner{padding-top:18px;flex-wrap:wrap;gap:18px}
.brand{margin-right:auto}
.header-actions{gap:10px}
.tabs{order:3;width:100%;margin-bottom:13px}
.tab{flex:1;justify-content:center}
.intro{padding:30px 0 23px;align-items:flex-start;gap:12px}
h1{font-size:27px}
.eyebrow{font-size:7px;letter-spacing:1.1px}
.intro p{font-size:11px}
.stats{gap:15px;padding-top:29px}
.stats strong{font-size:27px}
.stats span{font-size:9px}
.stats .stat-divider{height:30px}
.draw-grid{grid-template-columns:1fr}
.stage{min-height:410px}
.control-card{padding:22px}
.control-heading{margin-bottom:20px}
.control-card .control-heading p{display:none}
.control-card .control-heading{margin-bottom:18px}
.control-card .field-row{margin:16px 0}
.auto-note{margin-bottom:18px}
.demo-trigger{font-size:11px}
.history-section{padding-top:28px}
.winner-card{max-width:none;flex-basis:250px}
.member-grid{grid-template-columns:1fr;gap:18px}
.import-card{order:-1}
.member-card{min-height:250px}
.intro .secondary{padding:10px;font-size:10px;margin-top:22px}
.member-summary{font-size:10px}
footer{flex-direction:column;gap:10px;font-size:9px;padding-top:15px}
.stage-mode .header-inner{padding-bottom:15px}
.stage-mode .draw-grid{grid-template-columns:1fr}
.stage-mode .stage{min-height:65dvh}
.stage-mode .control-card{align-self:auto}
.stage-mode main{padding:14px}
.stage-mode .control-heading,.stage-mode .auto-note,.stage-mode .control-hint{display:none}
.stage-mode .control-card{padding:15px}
.stage-mode .stage-content{min-height:300px}
.stage-mode .trophy{width:126px;height:118px}
.stage-mode .field-row{margin:10px 0}
.stage-mode .stage.has-result #winner-display{font-size:45px}
.stage-mode .header .tabs{display:none}
}
@media(max-width:420px){.header-inner,main{padding-left:17px;padding-right:17px}
h1{font-size:24px}
.stats{gap:10px}
.stats strong{font-size:24px}
.stats span{font-size:8px}
.intro{gap:8px}
.eyebrow{letter-spacing:.7px}
.stage-top{font-size:8px}
.stage-content{padding-left:22px;padding-right:22px}
#winner-display{font-size:35px}
.stage.has-result #winner-display{font-size:38px}
.section-heading>div{gap:12px}
.text-button{font-size:10px}
.utility{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* BNI Brand Standards Manual (June 2020), pp. 4–9, 12, 15. */
.brand-lockup{display:block;width:150px;height:auto;max-width:none;filter:none;opacity:1;transform:none;box-shadow:none}

.brand:active{transform:none}

footer sup{font-size:.65em;line-height:0;vertical-align:super}

.stage-mode .header-actions .icon-btn{color:#64666A}

@media(max-width:760px){.header-inner{padding-top:0}
.brand-lockup{width:140px}
.stage-mode .header-inner{padding-bottom:0}
}


/* Show-ready audio controls and BNI-red presentation stage. */
.audio-control{margin:0 0 18px;padding:0 1px}
.volume-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.volume-heading label{margin:0;color:#64666A;font-size:11px}
.volume-heading output{font-size:10px;color:#64666A;font-variant-numeric:tabular-nums}
.audio-control input[type="range"]{padding:0;border:0;width:100%;height:18px;accent-color:#CF2030;cursor:pointer}
.track-label{margin:6px 0 0;font-size:10px;color:#64666A;line-height:1.5}
.music-credit{margin:0 0 24px;color:#64666A;font-size:10px;line-height:1.7}
.music-credit summary{cursor:pointer;width:fit-content}
.music-credit p{margin:8px 0}
.music-credit a{color:#64666A;text-underline-offset:3px}
.stage-mode .audio-control{margin:12px 0 18px}
.stage-mode .music-credit{display:none}
.stage-mode .stage{box-shadow:inset 0 0 0 1px #FFFFFF33}