body[data-how-surface="ops"]{
  --bg:#050708;--fg:var(--how-paper);--fg-soft:#c4cdd2;--muted:#818d95;
  --surface:#090d10;--surface2:#0e151a;--line:#202a31;--edge:#34424c;
  --navy:#030506;--panel:#090d10;--panel2:#0e151a;--steel:#34424c;
  --steel2:#202a31;--red:var(--how-cyan);--gold:var(--how-cyan);
  --gold-deep:#147a91;--gold-pale:#a7f2ff;--green:var(--how-green);
  --pink:var(--how-red);--light:var(--how-paper);--dim:var(--how-muted);
  --rule:#253139;--wash:#0c1216;--danger:var(--how-red);
  --hot:var(--how-cyan);--acc:var(--how-cyan);color:var(--how-paper)!important;
  background:
    linear-gradient(rgba(103,229,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,229,255,.018) 1px,transparent 1px),
    radial-gradient(circle at 82% -12%,rgba(40,172,204,.1),transparent 24rem),
    var(--how-ink)!important;background-size:48px 48px,48px 48px,auto,auto!important;
  font-family:var(--how-body)!important
}
body[data-how-surface="ops"] h1,body[data-how-surface="ops"] h2,
body[data-how-surface="ops"] h3{font-family:var(--how-display)!important;letter-spacing:-.02em}
.how-ops-brand{
  position:fixed;left:16px;top:12px;z-index:34;display:flex;align-items:center;gap:10px;
  min-height:42px!important;padding:5px 12px 5px 7px;color:var(--how-paper);text-decoration:none;
  background:rgba(3,5,6,.9);border:1px solid var(--how-line);backdrop-filter:blur(16px);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
.how-ops-brand img{width:25px;height:31px;object-fit:contain}.how-ops-brand span{font:800 10px/1 var(--how-display);letter-spacing:.18em;text-transform:uppercase}
.how-ops-brand small{display:block;margin-top:5px;color:var(--how-muted);font:700 7px/1 var(--how-body);letter-spacing:.15em}
#gate,#pinbox{z-index:120!important}
.how-ops-brand~.top,.how-ops-brand~header,.how-ops-brand~.tbar{padding-left:220px!important}
body[data-how-surface="ops"] .top,body[data-how-surface="ops"] header,
body[data-how-surface="ops"] .tbar{
  position:relative;border-color:var(--how-line)!important;
  background:linear-gradient(90deg,rgba(4,6,7,.98),rgba(10,15,18,.94))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)
}
body[data-how-surface="ops"] .top::after,body[data-how-surface="ops"] header::after,
body[data-how-surface="ops"] .tbar::after{content:"";position:absolute;left:0;bottom:-1px;width:min(42%,480px);height:1px;background:linear-gradient(90deg,var(--how-cyan),transparent)}
body[data-how-surface="ops"] .wrap{width:min(100%,1540px)!important;max-width:1540px!important;padding-inline:clamp(12px,2.4vw,38px)!important}
body[data-how-surface="ops"] .tbar{padding:12px clamp(12px,2.4vw,32px)!important;min-height:68px}
body[data-how-surface="ops"] .tbar h1,body[data-how-surface="ops"] .tbar h2{font-size:clamp(20px,2.2vw,34px)!important;text-transform:uppercase;letter-spacing:.02em!important}
body[data-how-surface="ops"] .sub,body[data-how-surface="ops"] .hint,
body[data-how-surface="ops"] .muted{color:#89969e!important}
body[data-how-surface="ops"] .tabs,body[data-how-surface="ops"] .subtabs{
  gap:0!important;overflow-x:auto;border-bottom:1px solid var(--how-line)!important;
  background:rgba(4,6,7,.85)!important;scrollbar-width:thin
}
body[data-how-surface="ops"] .tab,body[data-how-surface="ops"] .subtab{
  position:relative;min-width:max-content!important;border:0!important;border-right:1px solid var(--how-line)!important;
  border-radius:0!important;background:transparent!important;color:#859199!important;
  text-transform:uppercase!important;letter-spacing:.14em!important;font-size:10px!important
}
body[data-how-surface="ops"] .tab.on,body[data-how-surface="ops"] .subtab.on,
body[data-how-surface="ops"] .tab.active,body[data-how-surface="ops"] .subtab.active{
  color:var(--how-paper)!important;background:linear-gradient(180deg,rgba(103,229,255,.11),transparent)!important;
  box-shadow:inset 0 2px var(--how-cyan)!important
}
body[data-how-surface="ops"] .pane{padding-top:clamp(18px,2.2vw,32px)!important}
body[data-how-surface="ops"] .pane.on{animation:how-pane-in .28s var(--how-ease) both}
@keyframes how-pane-in{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
body[data-how-surface="ops"] .card,body[data-how-surface="ops"] .panel,
body[data-how-surface="ops"] .box,body[data-how-surface="ops"] .welcome,
body[data-how-surface="ops"] .sheet,body[data-how-surface="ops"] .evrow,
body[data-how-surface="ops"] .linkcard,body[data-how-surface="ops"] .un{
  position:relative;border:1px solid var(--how-line)!important;border-radius:0!important;
  background:linear-gradient(145deg,rgba(14,21,26,.98),rgba(6,9,11,.98))!important;
  box-shadow:none!important
}
body[data-how-surface="ops"] .card::before,body[data-how-surface="ops"] .panel::before,
body[data-how-surface="ops"] .box::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:1px;background:var(--how-cyan)}
body[data-how-surface="ops"] .sec,body[data-how-surface="ops"] .dsec,
body[data-how-surface="ops"] .mlabel{color:var(--how-cyan)!important;text-transform:uppercase;letter-spacing:.18em!important;font-size:10px!important;font-weight:800}
body[data-how-surface="ops"] .sec::after,body[data-how-surface="ops"] .dsec::after{background:linear-gradient(90deg,var(--how-line-strong),transparent)!important}
body[data-how-surface="ops"] .rstats,body[data-how-surface="ops"] .stats{
  gap:1px!important;background:var(--how-line)!important;border:1px solid var(--how-line)!important
}
body[data-how-surface="ops"] .rstats>*,body[data-how-surface="ops"] .stats>*{
  position:relative;border:0!important;border-radius:0!important;background:linear-gradient(145deg,#0f171c,#080c0f)!important;padding:clamp(14px,2vw,22px)!important
}
body[data-how-surface="ops"] .rstats>*::after,body[data-how-surface="ops"] .stats>*::after{content:"";position:absolute;right:0;top:0;width:18px;height:1px;background:rgba(103,229,255,.38)}
body[data-how-surface="ops"] .rstats b,body[data-how-surface="ops"] .stats b,
body[data-how-surface="ops"] .big{font-family:var(--how-display)!important;font-variant-numeric:tabular-nums;font-size:clamp(24px,3vw,42px)!important;line-height:1!important}
body[data-how-surface="ops"] button,body[data-how-surface="ops"] .btn,
body[data-how-surface="ops"] .sbtn,body[data-how-surface="ops"] .act{
  border-radius:0!important;font-weight:750;letter-spacing:.06em;border-color:#35434d!important;
  background:linear-gradient(180deg,#11181d,#090d10)!important;color:var(--how-paper)!important
}
body[data-how-surface="ops"] button:hover,body[data-how-surface="ops"] .btn:hover,
body[data-how-surface="ops"] .sbtn:hover,body[data-how-surface="ops"] .act:hover{border-color:var(--how-cyan)!important;color:var(--how-cyan)!important;background:#0c151a!important}
body[data-how-surface="ops"] button.primary,body[data-how-surface="ops"] .btn.primary,
body[data-how-surface="ops"] button.solid{
  border-color:var(--how-cyan)!important;color:#001014!important;background:var(--how-cyan)!important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
body[data-how-surface="ops"] button.danger,body[data-how-surface="ops"] .danger{border-color:rgba(255,84,63,.55)!important;color:#ff8172!important;background:rgba(62,14,9,.25)!important}
body[data-how-surface="ops"] input,body[data-how-surface="ops"] select,
body[data-how-surface="ops"] textarea{
  border-color:#35434d!important;border-radius:0!important;background:#05080a!important;color:var(--how-paper)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.015)!important
}
body[data-how-surface="ops"] input:focus,body[data-how-surface="ops"] select:focus,
body[data-how-surface="ops"] textarea:focus{border-color:var(--how-cyan)!important;box-shadow:0 0 0 2px rgba(103,229,255,.12)!important}
body[data-how-surface="ops"] label,body[data-how-surface="ops"] .lbl{color:#a4afb5!important;letter-spacing:.11em!important}
body[data-how-surface="ops"] .tablewrap,body[data-how-surface="ops"] .gridtable,
body[data-how-surface="ops"] .stable{border:1px solid var(--how-line)!important;background:#06090b!important}
body[data-how-surface="ops"] table{border-collapse:collapse;background:#070b0d!important;font-variant-numeric:tabular-nums}
body[data-how-surface="ops"] th{position:sticky;top:0;z-index:2;color:#8f9ca4!important;background:#0d1418!important;text-transform:uppercase;letter-spacing:.1em;font-size:10px!important}
body[data-how-surface="ops"] th,body[data-how-surface="ops"] td{border-color:#202a31!important}
body[data-how-surface="ops"] tbody tr{transition:background-color .14s ease}
body[data-how-surface="ops"] tbody tr:hover{background:rgba(103,229,255,.045)!important}
body[data-how-surface="ops"] .tbadge,body[data-how-surface="ops"] .chip,
body[data-how-surface="ops"] .badge{border-radius:0!important;letter-spacing:.1em!important;text-transform:uppercase}
body[data-how-surface="ops"] dialog,body[data-how-surface="ops"] .modal,
body[data-how-surface="ops"] .modalbox,body[data-how-surface="ops"] .drawer{
  border:1px solid rgba(103,229,255,.27)!important;background:linear-gradient(160deg,#10181d,#06090b)!important;
  color:var(--how-paper)!important;box-shadow:0 36px 120px rgba(0,0,0,.6)!important
}
body[data-how-surface="ops"] .mask,body[data-how-surface="ops"] .shmask,
body[data-how-surface="ops"] #gate{background:rgba(2,4,5,.88)!important;backdrop-filter:blur(12px)}
body[data-how-surface="ops"] .drow,body[data-how-surface="ops"] .lrow{
  border-color:var(--how-line)!important;background:linear-gradient(90deg,rgba(14,21,26,.86),rgba(7,10,12,.86))!important
}
body[data-how-surface="ops"] .drow:hover,body[data-how-surface="ops"] .lrow:hover{box-shadow:inset 2px 0 var(--how-cyan)!important}
body[data-how-surface="ops"] .cal,body[data-how-surface="ops"] .dpreview,
body[data-how-surface="ops"] .camprev{border-color:var(--how-line)!important;background:#06090b!important}
.how-context-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.3fr);min-height:420px;
  margin:8px 0 28px;overflow:hidden;border:1px solid var(--how-line);background:
    linear-gradient(90deg,rgba(3,5,6,.98),rgba(3,5,6,.8) 52%,rgba(3,5,6,.15)),var(--how-hero) 62% center/cover no-repeat
}
.how-context-copy{align-self:end;padding:clamp(26px,4vw,58px);z-index:1}
.how-context-kicker{display:block;margin-bottom:16px;color:var(--how-cyan);font:800 9px/1 var(--how-display);letter-spacing:.22em;text-transform:uppercase}
.how-context-copy h2{margin:0!important;max-width:790px;font-size:clamp(42px,5.5vw,82px)!important;line-height:.9!important;text-transform:uppercase}
.how-context-copy p{max-width:620px;margin:18px 0!important;color:#9ca8af!important;line-height:1.65}
.how-context-actions{display:flex;gap:8px;flex-wrap:wrap}
.how-context-signal{display:flex;flex-direction:column;justify-content:flex-end;gap:1px;padding:24px;border-left:1px solid var(--how-line);background:linear-gradient(180deg,transparent,rgba(4,7,9,.92))}
.how-context-signal img{width:68px;height:auto;margin:auto auto 20px}
.how-context-signal span{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0;border-top:1px solid var(--how-line);color:#849098;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.how-context-signal b{font:850 26px/1 var(--how-display);color:var(--how-paper)}
@media(max-width:760px){
  .how-ops-brand{left:8px;top:9px;padding:5px}.how-ops-brand span{display:none}
  .how-ops-brand~.top,.how-ops-brand~header,.how-ops-brand~.tbar{padding-left:58px!important}
  body[data-how-surface="ops"] .wrap{padding-inline:12px!important}
  body[data-how-surface="ops"] .tbar{min-height:60px;padding-inline:12px!important}
  body[data-how-surface="ops"] .rstats,body[data-how-surface="ops"] .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-how-surface="ops"] .pane{padding-top:14px!important}
  body[data-how-surface="ops"] .tab,body[data-how-surface="ops"] .subtab{padding-inline:14px!important}
  body[data-how-surface="ops"]{height:auto!important;min-height:100%!important;overflow-y:auto!important}
  .how-context-hero{grid-template-columns:1fr;min-height:560px;background-position:68% center}
  .how-context-signal{display:none}.how-context-copy{padding:26px 20px}
}
@media(max-width:360px){
  body[data-how-surface="ops"] .rstats,body[data-how-surface="ops"] .stats{grid-template-columns:minmax(0,1fr)!important}
  body[data-how-surface="ops"] .tacts{grid-template-columns:minmax(0,1fr)!important}
}
/* HOW Tournament UI release 3.6.6 */

/* Platform control center: persistent command rail plus an editorial work canvas. */
body[data-how-layout="control-center"]{--how-admin-rail:252px}
body[data-how-layout="control-center"] .shell{display:grid!important;grid-template-columns:var(--how-admin-rail) minmax(0,1fr)!important;min-height:calc(100svh - 64px)}
body[data-how-layout="control-center"] .shell>.rail{position:sticky!important;top:64px!important;width:auto!important;height:calc(100svh - 64px)!important;padding:28px 16px!important;border-right:1px solid var(--how-rule)!important;background:#05080a!important}
body[data-how-layout="control-center"] .rail .grp{margin:26px 12px 8px!important;font-size:9px!important;letter-spacing:.2em!important}
body[data-how-layout="control-center"] .rail button{position:relative;width:100%;min-height:42px!important;padding:11px 12px 11px 26px!important;text-align:left!important;border-left:1px solid transparent!important}
body[data-how-layout="control-center"] .rail button::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:1px;background:currentColor;opacity:.45}
body[data-how-layout="control-center"] .rail button.on{border-left-color:var(--how-cyan)!important;background:linear-gradient(90deg,rgba(82,226,255,.12),transparent)!important;color:var(--how-paper)!important}
body[data-how-layout="control-center"] .main{margin-left:0!important;width:auto!important;padding:clamp(36px,5vw,82px)!important}
body[data-how-layout="control-center"] .pane>.title{max-width:980px!important;font-size:clamp(58px,7vw,112px)!important;line-height:.8!important;letter-spacing:-.045em!important}
body[data-how-layout="control-center"] .pane>.lead{max-width:680px!important;margin:24px 0 52px!important;font-size:16px!important}
body[data-how-layout="control-center"] .pane>.sec{counter-increment:how-admin;display:grid!important;grid-template-columns:46px 1fr;align-items:center;gap:12px;margin-top:54px!important;padding-top:16px!important;border-top:1px solid var(--how-rule)!important}
body[data-how-layout="control-center"] .pane>.sec::before{content:"0" counter(how-admin);color:var(--how-cyan);font:800 10px/1 var(--how-display);letter-spacing:.18em}
body[data-how-layout="control-center"] .pane{counter-reset:how-admin}
body[data-how-layout="control-center"] .stats{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:1px!important;background:var(--how-rule)!important;border:1px solid var(--how-rule)!important}
body[data-how-layout="control-center"] .stats>.stat{grid-column:span 3;min-height:150px!important;padding:22px!important;border:0!important}
body[data-how-layout="control-center"] .stats>.stat:first-child{grid-column:span 6}
body[data-how-layout="control-center"] .stats>.stat.hi{background:var(--how-cyan)!important;color:#020405!important}
body[data-how-layout="control-center"] .stats>.stat.hi :is(b,span){color:#020405!important}
body[data-how-layout="control-center"] .tablewrap{margin-top:28px!important;border:1px solid var(--how-rule)!important}

/* Event workspace: the tournament tools become a command rail on wide screens. */
@media(min-width:1100px){
  body[data-how-layout="event-workspace"]{padding-left:244px!important}
  body[data-how-layout="event-workspace"]>.top{position:relative!important;z-index:12!important}
  body[data-how-layout="event-workspace"]>.top>.tbar{min-height:116px!important;padding:24px 34px!important;border-bottom:1px solid var(--how-rule)!important}
  body[data-how-layout="event-workspace"]>.top>.tbar h1{font-size:clamp(30px,3vw,48px)!important;line-height:.9!important}
  body[data-how-layout="event-workspace"]>.top>.tabs{position:fixed!important;left:0;top:0;width:244px;height:auto;max-height:36svh;overflow:auto;display:flex;flex-direction:column;align-items:stretch;padding:88px 14px 14px!important;background:#05080a!important;border:0!important;border-right:1px solid var(--how-rule)!important;z-index:9}
  body[data-how-layout="event-workspace"]>.top>.tabs.subtabs{top:36svh;bottom:0;max-height:none;padding:14px!important;border-top:1px solid var(--how-rule)!important}
  body[data-how-layout="event-workspace"]>.top>.tabs>.tab{width:100%;min-height:44px;padding:11px 14px!important;text-align:left!important;justify-content:flex-start;border:0!important;border-left:1px solid transparent!important}
  body[data-how-layout="event-workspace"]>.top>.tabs>.tab.on{border-left-color:var(--how-cyan)!important;background:linear-gradient(90deg,rgba(82,226,255,.12),transparent)!important}
  body[data-how-layout="event-workspace"]>.wrap{max-width:none!important;width:100%!important;padding:clamp(28px,4vw,68px)!important}
  body[data-how-layout="event-workspace"] .pane>h2:first-child{font-size:clamp(46px,6vw,92px)!important;line-height:.84!important;letter-spacing:-.035em!important}
  body[data-how-layout="event-workspace"] .rstats,body[data-how-layout="event-workspace"] .stats{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:1px!important;background:var(--how-rule)!important;border:1px solid var(--how-rule)!important}
  body[data-how-layout="event-workspace"] :is(.rstats,.stats)>*{grid-column:span 3;border:0!important;min-height:124px!important}
}

/* Reception keeps the proven no-page-scroll POS frame, with a clear queue-to-action flow. */
body[data-how-layout="reception-desk"]>.top{display:grid!important;grid-template-columns:1fr auto auto;min-height:68px!important;padding-inline:22px!important}
body[data-how-layout="reception-desk"]>.wrap{grid-template-columns:minmax(270px,.86fr) minmax(390px,1.35fr) minmax(280px,.92fr)!important;gap:1px!important;max-width:none!important;padding:1px!important;background:var(--how-rule)!important}
body[data-how-layout="reception-desk"]>.wrap>*{background:#070b0e;padding:14px!important}
body[data-how-layout="reception-desk"] .card{border-color:var(--how-rule)!important}
body[data-how-layout="reception-desk"] .primary{min-height:88px!important;font-family:var(--how-display)!important;font-size:22px!important;text-transform:uppercase;letter-spacing:.05em!important}
body[data-how-layout="reception-desk"] .trow.on{border-left:3px solid var(--how-cyan)!important;background:linear-gradient(90deg,rgba(82,226,255,.1),transparent)!important}

body[data-how-layout="tournament-builder"] .wrap{max-width:1380px!important}
body[data-how-layout="tournament-builder"] :is(.steps,.wizard,.cards){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:1px!important;background:var(--how-rule)!important}
body[data-how-layout="tournament-builder"] :is(.steps,.wizard,.cards)>*{grid-column:span 4!important;margin:0!important;min-height:230px!important}
@media(max-width:1099px){
  body[data-how-layout="control-center"]{--how-admin-rail:210px}
  body[data-how-layout="control-center"] .stats>.stat,body[data-how-layout="control-center"] .stats>.stat:first-child{grid-column:span 6}
  body[data-how-layout="reception-desk"]>.wrap{grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr)!important}
  body[data-how-layout="reception-desk"]>.wrap>.who{grid-column:2!important}
}
@media(max-width:760px){
  body[data-how-layout="control-center"] .shell{display:block!important}body[data-how-layout="control-center"] .shell>.rail{position:static!important;width:100%!important;height:auto!important;display:flex!important;overflow-x:auto;padding:10px!important}
  body[data-how-layout="control-center"] .rail .grp{display:none!important}body[data-how-layout="control-center"] .rail button{width:auto;min-width:max-content!important;padding:10px 14px!important}
  body[data-how-layout="control-center"] .main{padding:28px 14px!important}body[data-how-layout="control-center"] .pane>.title{font-size:54px!important}
  body[data-how-layout="control-center"] .stats>.stat,body[data-how-layout="control-center"] .stats>.stat:first-child{grid-column:span 12}
  body[data-how-layout="reception-desk"]>.wrap{grid-template-columns:1fr!important;overflow:auto!important}body[data-how-layout="reception-desk"]>.wrap>.who{grid-column:1!important}
  body[data-how-layout="tournament-builder"] :is(.steps,.wizard,.cards)>*{grid-column:span 12!important}
}