/* Promomint hub — the design system in code: Floodlight (dark) for live surfaces, Daylight for the office. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(/fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(/fonts/barlow-latin-600-normal.woff2) format('woff2'); }
:root { --f-d: 'Barlow Condensed', 'Arial Narrow', sans-serif; --f-t: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.fl { --g:#0D0B22; --s:#17142F; --r:#221E40; --ln:#34305C; --ink:#FFFFFF; --mu:#A9A5D6; --act:#02AED6; --mon:#FDB21A; --liv:#11CD88; --dan:#FF8A7A; }
.dl { --g:#F7F6FC; --s:#FFFFFF; --r:#EEECF7; --ln:#D6D3EA; --ink:#0D0B22; --mu:#4A4868; --act:#00739A; --mon:#8A5A00; --liv:#08784F; --dan:#C0341D; }
* { box-sizing: border-box } html, body { margin: 0; min-height: 100% }
body { background: var(--g); color: var(--ink); font: 15px/22px var(--f-t); -webkit-font-smoothing: antialiased }
a { color: var(--act) } button, input, select, textarea { font: inherit; color: inherit }
.disp { font-family: var(--f-d) } .num { font-variant-numeric: tabular-nums }
.mu { color: var(--mu) } .liv { color: var(--liv) } .mon { color: var(--mon) } .dan { color: var(--dan) } .act { color: var(--act) }
.lbl { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.h1 { font: 800 clamp(34px, 5vw, 56px)/1 var(--f-d); margin: 0 } .h2 { font: 800 30px/1.05 var(--f-d); margin: 0 } .h3 { font: 600 18px/24px var(--f-t); margin: 0 }
.sm { font-size: 13px; line-height: 18px }
.card { background: var(--s); border: 1px solid var(--ln); border-radius: 12px } .pad { padding: 18px } .pad-s { padding: 12px }
.row { display: flex; align-items: center; gap: 10px } .col { display: flex; flex-direction: column; gap: 12px } .wrap { flex-wrap: wrap } .grow { flex: 1; min-width: 0 } form.wrap > .grow { flex: 1 1 200px }   /* a form's text wraps above its field on phones instead of squeezing */ .right { margin-left: auto }
.grid { display: grid; gap: 10px } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 600; border: 1px solid var(--ln); background: var(--s); color: var(--ink); text-decoration: none; cursor: pointer }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--act); outline-offset: 2px }
.btn[disabled] { opacity: .45; cursor: not-allowed } .btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px }
.btn-p { background: #02AED6; border-color: #02AED6; color: #0D0B22 } .btn-a { background: #FDB21A; border-color: #FDB21A; color: #0D0B22 } .btn-g { background: #11CD88; border-color: #11CD88; color: #0D0B22 } .btn-w { background: #C0341D; border-color: #C0341D; color: #fff }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.p-live { background: #11CD88; color: #0D0B22 } .p-neu { background: var(--r); color: var(--mu) } .p-mon { background: #FDB21A; color: #0D0B22 } .p-act { background: #02AED6; color: #0D0B22 }
.inp { display: block; width: 100%; min-height: 44px; border: 1px solid var(--ln); border-radius: 12px; background: var(--s); padding: 10px 12px }
textarea.inp { min-height: 120px; resize: vertical }
.fld { display: flex; flex-direction: column; gap: 6px } .fld > label { font-size: 13px; font-weight: 600; color: var(--mu) }
.ball { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font: 700 13px/1 var(--f-d); background: var(--r); border: 1px solid var(--ln); flex: none }
.b4 { background: #02AED6; color: #0D0B22; border-color: #02AED6 } .b6 { background: #FDB21A; color: #0D0B22; border-color: #FDB21A } .bw { background: var(--dan); color: #0D0B22; border-color: var(--dan) }
.tbl { width: 100%; border-collapse: collapse } .tbl th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); padding: 8px 10px; border-bottom: 1px solid var(--ln) }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--ln); font-variant-numeric: tabular-nums } .tbl .r { text-align: right } .scroll { overflow-x: auto }
.top { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--ln); background: #0D0B22; color: #fff }
.logo { height: 18px; width: auto } .page { max-width: 1100px; margin: 0 auto; padding: 22px 18px 60px; display: flex; flex-direction: column; gap: 18px }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; background: #0D0B22; color: #fff; border: 1px solid #34305C; border-radius: 12px; padding: 12px 16px; max-width: 92vw }
.note { border: 1px solid var(--act); border-radius: 12px; padding: 10px 12px; font-size: 13px }
.note.warn { border-color: #FDB21A }
/* scorer */
.sc { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column }
.sc-top { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; background: #0D0B22; color: #fff; border-bottom: 1px solid #34305C }
.sc-body { flex: 1; padding: 12px 14px 18px; display: flex; flex-direction: column; gap: 10px }
.pad-btn { min-height: 60px; font: 800 30px/1 var(--f-d) }
.fh { background: #FDB21A; color: #0D0B22; text-align: center; font: 800 18px var(--f-d); letter-spacing: .12em; border-radius: 10px; padding: 6px }
@media (max-width: 640px) { .g4.stack, .g3.stack, .g2.stack { grid-template-columns: minmax(0, 1fr) } }
/* Release 2: workspace tabs, cards and steps */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ln); margin: -4px 0 2px; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tabs a { flex: none; padding: 10px 14px; font-weight: 600; color: var(--mu); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap }
.tabs a:hover { color: var(--ink) } .tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: #02AED6 }
a.ws, a.stat-card { text-decoration: none; color: inherit; gap: 6px; transition: border-color .15s } a.ws:hover, a.stat-card:hover { border-color: var(--act) }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px } .steps li.done { color: var(--mu) } .steps li.done::marker { content: '✓  '; color: var(--liv) }
.feat { cursor: pointer; align-items: flex-start } .feat.on { border-color: var(--liv) } .feat input { margin-top: 4px; width: 18px; height: 18px }
[hidden] { display: none !important }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--r); color: var(--mu); font: 700 13px/1 var(--f-d); flex: none }
/* Release 2: the toss coin (scorer app, match page, stream overlay) */
.coin-wrap { display: grid; place-items: center; padding: 56px 0 14px; perspective: 700px }
.coin { position: relative; width: 120px; height: 120px; transform-style: preserve-3d; transition: transform .3s }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; font: 800 54px/1 var(--f-d); color: #0D0B22;
  background: radial-gradient(circle at 35% 30%, #FFE08A, #FDB21A 55%, #C98A00); box-shadow: inset 0 0 0 6px rgba(13,11,34,.18), 0 10px 24px rgba(0,0,0,.25) }
.coin .face.t { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #9CF2FF, #02AED6 55%, #017A97) }
.coin.show-h { transform: rotateY(0deg) } .coin.show-t { transform: rotateY(180deg) }
.coin.spin-h { animation: coin-h 1.8s cubic-bezier(.2,.7,.3,1) forwards } .coin.spin-t { animation: coin-t 1.8s cubic-bezier(.2,.7,.3,1) forwards }
@keyframes coin-h { 0% { transform: translateY(0) rotateY(0) } 45% { transform: translateY(-46px) rotateY(1080deg) } 100% { transform: translateY(0) rotateY(2160deg) } }
@keyframes coin-t { 0% { transform: translateY(0) rotateY(0) } 45% { transform: translateY(-46px) rotateY(1080deg) } 100% { transform: translateY(0) rotateY(2340deg) } }
.toss-result { text-align: center; font-size: 17px; margin: 0 }
.toss-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(13,11,34,.82); color: #fff; animation: fade-in .3s }
.toss-pop .card { background: #17142F; border-color: #34305C; color: #fff; text-align: center; max-width: 420px; width: calc(100% - 32px) }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .coin.spin-h, .coin.spin-t { animation: none } .coin.spin-t { transform: rotateY(180deg) } }
.toss-pop .coin .face { font-size: 30px } .toss-line { color: var(--mu) }
/* Release 2, step 6 — fixture formats: the structure as a flow of stages, and the custom builder's lines */
.fx-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px }
.fx-stage { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 10px; background: var(--g); min-width: 120px }
.fx-stage b { font-size: 14px } .fx-stage .num { font: 800 20px/1 var(--f-d) }
.fx-arrow { align-self: center; color: var(--mu); font-weight: 700 }
.fx-total { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--r); margin-left: auto; min-width: 110px }
.fx-total b { font-size: 30px; line-height: 1 }
.fx-rows { display: flex; flex-direction: column; gap: 6px }
.fx-row { display: grid; grid-template-columns: 22px 1.3fr 1.3fr 1.4fr 1.1fr 1fr 70px 40px; gap: 6px; align-items: center }
.fx-row .inp { min-height: 38px; padding: 6px 8px; font-size: 14px }
@media (max-width: 760px) { .fx-row { grid-template-columns: 22px 1fr 1fr; } .fx-row > :nth-child(n+4) { grid-column: 2 / span 2 } .fx-total { margin-left: 0 } }
.or { display: flex; align-items: center; gap: 10px } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--ln) }
/* Release 3B: the organiser console's side menu */
.oc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.oc-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;background:#0D0B22;color:#fff;border-radius:16px;padding:14px 10px}
.oc-side>summary{display:none}
.oc-side a{display:block;padding:9px 12px;border-radius:9px;color:#d9d6f5;text-decoration:none;font-weight:600;font-size:14px}
.oc-side a[aria-current]{background:#221E40;color:#fff;box-shadow:inset 3px 0 0 #02AED6}
.oc-side a:hover{background:#17142F}
.oc-grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6f6b9c;margin:14px 12px 4px}
.oc-id{display:flex;gap:10px;align-items:center;padding:4px 8px 12px;font-size:14px;line-height:18px}.oc-id .mu{color:#A9A5D6}.oc-id img{border-radius:10px;object-fit:cover;background:#fff;flex:none}
.oc-logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#221E40;border:1px solid #34305C;font:800 13px/1 var(--f-d);flex:none}
.oc-all{margin-top:12px;color:#A9A5D6!important;font-weight:500!important}
.oc-main{min-width:0}
@media (max-width:900px){.oc{grid-template-columns:minmax(0,1fr)}.oc-side{position:static;padding:8px}.oc-side>summary{display:inline-flex;list-style:none;cursor:pointer;align-self:flex-start}.oc-side>summary::-webkit-details-marker{display:none}.oc-side[open]>summary{margin-bottom:8px}}
.bbar{position:relative;height:10px;border-radius:99px;background:var(--r)}.bbar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px}.bbar s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--ln);border-radius:999px;overflow:hidden;flex:none}.seg a{padding:7px 14px;text-decoration:none;color:var(--mu);font-weight:600;white-space:nowrap}.seg a[aria-current]{background:#02AED6;color:#0D0B22}