/* PayU test console. TeeOff app layer (teeoff-design/app/APP.md): tokens, radii, shadows and motion copied
   from app/starter/app.css; the console layout is new (desktop-first tester, not a visitor flow). */
:root{color-scheme:light;
  --navy:#1b2557; --yellow:#FECD73; --cream:#F0EBDF;
  --panel:#2A3361; --rule-d:#52587A; --dim-d:#B4B4B9;
  --dim:#5C6484; --fine:#8892A9; --line:#DDD8CC;
  --surface:#F8F5EE; --surface-2:#E9E3D6;
  --ok:#7FD1A8; --ok-l:#2f7a55; --red:#c2452d;
  --display:"Outfit","Noto Sans Devanagari","Work Sans",sans-serif;
  --body:"Work Sans","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --r:14px; --ease:cubic-bezier(.2,.7,.3,1); --t:.22s; --shadow:0 10px 30px -18px rgba(27,37,87,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--cream);color:var(--navy);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.navy{background:var(--navy);color:var(--cream)}
.navy .kicker{color:var(--dim-d)}
[hidden]{display:none!important}
.fine{font-size:12.5px;color:var(--dim)}
.navy .fine{color:var(--dim-d)}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* buttons (starter values) */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;border-radius:var(--r);background:var(--navy);color:var(--cream);font-weight:600;width:100%;transition:transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.yellow{background:var(--yellow);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.ghost-d{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--rule-d)}
.btn.ghost-d[aria-pressed=true]{background:var(--cream);color:var(--navy);box-shadow:none}
.btn.red{background:var(--red);color:#fff}   /* white kept: cream on this red is 4.22:1, white 5.02:1 (APP.md) */
.btn.sm{min-height:44px;font-size:15px;padding:0 14px;width:auto}
.btn:disabled{filter:saturate(.3) brightness(.75);pointer-events:none}

/* splash: teeoff-design/app/starter/app.css, values unchanged (APP.md § Splash) */
/* ---------- 0. splash ---------- */
.splash{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 16px calc(18px + env(safe-area-inset-bottom))}
.splash>*{position:relative;z-index:1}
.mk{width:84px;height:131px;margin-top:6px}
.mk svg{display:block;width:100%;height:100%;overflow:visible}
.rings{position:absolute!important;left:48%;top:30%;width:0;height:0;z-index:0!important;pointer-events:none}
.rings i,.rings b{position:absolute;border-radius:50%;border:1.5px solid var(--yellow);opacity:.18}
.rings b{opacity:0;animation:wave 3.2s 1.4s cubic-bezier(.2,.6,.4,1) infinite}
.rings b+b{animation-delay:3s}
@keyframes wave{from{opacity:.4;transform:scale(.25)}to{opacity:0;transform:scale(1)}}
@keyframes ring{from{opacity:0;transform:scale(.4)}to{opacity:.18;transform:none}}
.rings i.seq{animation:ring .9s var(--ease) both}
.m-ln{animation:draw .8s .1s ease-out both}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.m-ring,.m-sring,.m-dot{transform-box:fill-box;transform-origin:center}
.m-ring{animation:spinin .7s var(--ease) both}
@keyframes spinin{from{opacity:0;transform:rotate(-120deg) scale(.6)}to{opacity:1;transform:none}}
.m-dot{animation:pop .42s var(--ease) both}
.m-sring{animation:pop .5s 1s var(--ease) both}
.wm{display:grid;justify-items:center;gap:7px;margin:18px auto 0;animation:rise .5s 1.25s var(--ease) both}
.wm svg{display:block;height:auto}.wm .w1,.wm .w2{width:132px}
.hello{font:700 42px/1.15 var(--display);color:var(--yellow);margin-top:26px;min-height:1.2em;animation:rise .45s 1.45s var(--ease) both}
.hello span{display:inline-block}
.splash h1{font-size:23px;line-height:1.22;max-width:340px;margin:6px auto 0;animation:rise .45s 1.55s var(--ease) both}
.splash h1 em{font-style:normal;color:var(--yellow)}
.does{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:360px;margin:26px auto 0}
.does li{display:grid;justify-items:center;gap:8px;font-size:13px;line-height:1.2;color:var(--cream);animation:rise .4s var(--ease) both}
.does li:nth-child(1){animation-delay:1.75s}.does li:nth-child(2){animation-delay:1.85s}.does li:nth-child(3){animation-delay:1.95s}
.splash .go{margin-top:auto;padding-top:22px;width:100%;max-width:400px}
.splash .go .btn{animation:rise .4s 2.1s var(--ease) both}
.splash .fine{margin-top:10px;font-size:12px;color:var(--dim-d);animation:rise .4s 2.2s var(--ease) both}
.splash.skip .seq,.splash.skip .m-ln,.splash.skip .m-dot,.splash.skip .m-ring,.splash.skip .m-sring{animation:none!important}
.splash{min-height:100dvh}

/* layout: navy control column + cream work area */
.con{display:grid;grid-template-columns:minmax(340px,380px) minmax(0,1fr);height:100dvh}
.side{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:32px 32px 24px}
.side::after{content:"";position:absolute;right:-220px;bottom:-220px;width:520px;height:520px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(254,205,115,.18),0 0 0 70px var(--navy),0 0 0 71.5px rgba(254,205,115,.18),0 0 0 140px var(--navy),0 0 0 141.5px rgba(254,205,115,.18);pointer-events:none}
.side>*{position:relative;z-index:1}
.brand{font:700 22px var(--display);letter-spacing:-.01em;margin-bottom:22px}
.brand span{color:var(--yellow)}
.side .kicker{display:block}
.side>div:first-child .kicker{color:var(--yellow);margin-bottom:10px}
.side h2{font-size:34px}
.blurb{color:var(--dim-d);margin-top:8px;max-width:34ch}

.pick{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel);border-radius:var(--r);padding:4px}
.seg button{min-height:40px;border-radius:10px;font-weight:600;color:var(--dim-d);transition:background .18s,color .18s}
.seg button[aria-pressed=true]{background:var(--cream);color:var(--navy)}
.hint{font-size:13px;color:var(--dim-d);line-height:1.4}
.list{display:grid;gap:6px;overflow-y:auto;min-height:0;scrollbar-width:thin;margin-right:-8px;padding-right:8px}
.row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:baseline;text-align:left;padding:9px 12px;border-radius:14px;background:var(--panel);transition:background .18s,color .18s,transform .12s var(--ease);animation:rise .26s var(--ease) both}
.row:active{transform:scale(.97)}
.row .id{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--yellow);grid-row:span 2}
.row b{font:700 15px/1.25 var(--display);letter-spacing:-.01em}
.row small{font-size:12.5px;line-height:1.3;color:var(--dim-d)}
.row[aria-pressed=true]{background:var(--cream);color:var(--navy)}
.row[aria-pressed=true] .id{color:var(--navy)}
.row[aria-pressed=true] small{color:var(--dim)}
.num{display:grid;gap:6px}
.num input{min-height:48px;border-radius:var(--r);border:0;background:var(--panel);color:var(--cream);padding:0 14px;font:500 18px var(--mono);letter-spacing:.08em}

.callbox{display:grid;gap:12px}
.live{display:flex;align-items:center;gap:14px}
.orb{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.orb b{position:absolute;inset:6px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font:700 24px var(--display);z-index:1;transition:background .2s,color .2s}
.orb i{position:absolute;inset:6px;border-radius:50%;border:1.5px solid var(--yellow);opacity:0}
.orb.talk i{animation:ripple 1.8s cubic-bezier(.2,.6,.4,1) infinite}
.orb.talk i+i{animation-delay:.9s}
.orb.caller b{background:var(--cream)}
.orb.caller i{border-color:var(--cream);animation:ripple 1.8s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes ripple{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.status{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.timer{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--dim-d);font-variant-numeric:tabular-nums;margin-top:4px}
.timer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.err{color:#f6dcd5;font-size:13.5px;line-height:1.4}
.ctl{display:flex;gap:8px}
.ctl .btn.sm{flex:1}

/* work area */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:28px 32px 24px;gap:18px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.top h1{font-size:34px;margin-top:4px}
.sub{color:var(--dim);margin-top:2px}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);min-width:0}
.card .hd{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.empty{color:var(--fine);font-size:13.5px;list-style:none}
.rail{display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0;scrollbar-width:thin;padding:0 6px 4px 0}

.tr{display:flex;flex-direction:column;min-height:0}
.convo{list-style:none;flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:2px 2px 8px;scrollbar-width:thin}
.convo li.agent,.convo li.caller{max-width:78%;padding:9px 13px;border-radius:14px;line-height:1.45;animation:rise .2s var(--ease) both}
.convo li.agent{align-self:flex-start;background:var(--navy);color:var(--cream);border-bottom-left-radius:4px}
.convo li.caller{align-self:flex-end;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line);border-bottom-right-radius:4px}
.convo li.part{opacity:.65}
.convo li .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.convo li.sys{align-self:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.convo li.sys.bad{color:#8a2b1a}

.ctx{white-space:pre-wrap;font:13.5px/1.6 var(--body);color:var(--navy)}
.ctx b{font-weight:600}
.tasks{list-style:none;display:grid;gap:6px;margin-bottom:8px}
.tasks li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.tasks select{border:0;border-radius:99px;padding:5px 26px 5px 12px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b2557' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;cursor:pointer}
.tasks select.done{background-color:#dcefe3;color:var(--ok-l)}
.tasks select.rejected{background-color:#f6dcd5;color:#8a2b1a}
.tasks select.in_review{background-color:var(--navy);color:var(--yellow)}
.tasks select:disabled{cursor:default}
.tools{list-style:none;display:grid;gap:8px}
.tools li{display:grid;gap:3px;font-size:13px;animation:rise .2s var(--ease) both}
.tools .nm{display:flex;justify-content:space-between;gap:8px;font:600 13.5px var(--body)}
.tools code{font:12px/1.4 var(--mono);color:var(--dim);word-break:break-word}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:var(--navy);color:var(--yellow);white-space:nowrap;align-self:start}
.pill.ok{background:#dcefe3;color:var(--ok-l)}
.pill.miss{background:#f6dcd5;color:#8a2b1a}
.writes{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:13.5px}
.tagrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 10px;font-size:13.5px;padding:3px 0}
.tagrow dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.tagnote{margin-top:8px;color:var(--dim);font-size:13px}

@media (max-width:1023px){
  .con{grid-template-columns:1fr;height:auto}
  .grid{grid-template-columns:1fr}
  .tr{min-height:60vh}
  .side,.main{padding:20px 16px}
}
/* connecting pop-up (as africa_demo booth): steps advance only on real events, closes on the first agent audio */
.pm{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(27,37,87,.5);opacity:0;transition:opacity .25s}
.pm.on{opacity:1}
.pm[hidden]{display:none}
.pm-card{width:min(360px,100%);background:var(--cream);color:var(--navy);border-radius:20px;padding:18px;display:grid;gap:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);transform:translateY(8px);transition:transform .25s var(--ease)}
.pm-card:focus{outline:none}
.pm.on .pm-card{transform:none}
.pm-top{display:grid;grid-template-columns:46px minmax(0,1fr) 48px;gap:12px;align-items:center}
.pm-top .ic{width:46px;height:46px;border-radius:13px;background:var(--navy);color:var(--yellow);display:grid;place-items:center}
.pm-top b{font:700 16px var(--display);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-top small{display:block;color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-orb{position:relative;width:40px;height:40px;margin:4px;display:grid;place-items:center}
.pm-orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--navy);opacity:.2;animation:cpulse 1.6s var(--ease) infinite}
.pm-orb i:nth-child(2){animation-delay:.5s}
.pm-orb b{width:16px;height:16px;border-radius:50%;background:var(--yellow);animation:cbreath 1.6s ease-in-out infinite}
.pm-steps{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:2px;border-top:1px solid var(--line)}
.pm-steps li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;height:34px;font-size:14.5px;line-height:1.15;color:#B9B3A6;transition:color .3s}
.pm-steps li.on{color:var(--navy);font-weight:600}
.pm-steps li.done{color:var(--dim)}
.pm-steps .mk{width:18px;height:18px;display:grid;place-items:center}
.pm-steps li.next .mk::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
.pm-steps li.on .mk::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--navy);border-right-color:transparent;animation:spin .8s linear infinite}
.pm-steps li.done .mk::before{content:"✓";color:var(--ok-l);font-weight:700}
.pm-err{font-size:13.5px;color:#8a2b1a;margin:0}
.pm-err:empty{display:none}
.pm .btn{display:none;min-height:44px}
.pm.err .btn{display:flex}
.pm.err .pm-orb i,.pm.err .pm-orb b{animation:none}
.pm.err .pm-steps li.on .mk::before{content:"!";width:auto;height:auto;border:0;animation:none;color:#8a2b1a;font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cpulse{0%{transform:scale(.9);opacity:.1}50%{opacity:.55}100%{transform:scale(1.18);opacity:.1}}
@keyframes cbreath{50%{transform:scale(.8);opacity:.7}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rings b{display:none}}