/* 186 · Access Codes polish — modal + list micro-interactions. Loaded LAST.
   Roll back: remove this <link> and the 186 <script> tag from index.html. */
:root{--ox-navy:#162D4C;--ox-sand:#CEA577;--ox-sand-d:#B88A57;--ox-line:#E3E7EC;--ox-ink:#1d2b3f;--ox-mute:#6b7788;--ox-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Modal ---------- */
#quickOtacModal{background:rgba(10,20,36,.58);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
#quickOtacModal .modal-box{width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;border:0;border-radius:20px;background:#fff;
  box-shadow:0 30px 70px -20px rgba(10,20,36,.55),0 0 0 1px rgba(22,45,76,.06);
  transform:translateY(18px) scale(.97);opacity:0;animation:oxPop .42s var(--ox-ease) forwards}
#quickOtacModal .modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:18px 22px;background:linear-gradient(180deg,#fff 70%,rgba(255,255,255,.92));border-bottom:1px solid var(--ox-line)}
#quickOtacModal .modal-head h3{display:flex;align-items:center;gap:12px;margin:0;font-size:1.15rem;color:var(--ox-navy);letter-spacing:.1px}
#quickOtacModal .modal-head h3 i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ox-navy);color:var(--ox-sand);font-size:15px;box-shadow:inset 0 0 0 1px rgba(206,165,119,.35)}
#quickOtacModal .modal-close{order:2;margin-inline-start:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--ox-mute);background:#f3f5f8;transition:background .2s,color .2s,transform .3s var(--ox-ease)}
#quickOtacModal .modal-close:hover{background:var(--ox-navy);color:#fff;transform:rotate(90deg)}
#quickOtacModal .modal-body{padding:20px 22px 22px}
#quickOtacModal .form-row{position:relative;margin-bottom:14px;opacity:0;transform:translateY(8px);animation:oxRise .45s var(--ox-ease) forwards}
#quickOtacModal .form-row:nth-child(1){animation-delay:.08s}#quickOtacModal .form-row:nth-child(2){animation-delay:.13s}
#quickOtacModal .form-row:nth-child(3){animation-delay:.18s}#quickOtacModal .form-row:nth-child(4){animation-delay:.23s}
#quickOtacModal .form-row:nth-child(5){animation-delay:.28s}#quickOtacModal .form-row:nth-child(6){animation-delay:.33s}
#quickOtacModal label{display:block;margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.2px;color:var(--ox-mute);text-transform:none}
#quickOtacModal input,#quickOtacModal select{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--ox-line);border-radius:12px;background:#fafbfc;color:var(--ox-ink);font-size:.95rem;transition:border-color .2s,box-shadow .2s,background .2s}
#quickOtacModal input:hover,#quickOtacModal select:hover{border-color:#cfd6df}
#quickOtacModal input:focus,#quickOtacModal select:focus{outline:0;background:#fff;border-color:var(--ox-sand);box-shadow:0 0 0 4px rgba(206,165,119,.22)}
#quickOtacModal input::placeholder{color:#a3adba}
#quickOtacModal #qOtacPhone{direction:ltr;text-align:start;font-variant-numeric:tabular-nums;letter-spacing:.3px}
#quickOtacModal .form-row[data-valid="1"]::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset-inline-end:14px;bottom:13px;font-size:.8rem;color:#12a15b;animation:oxPopIn .35s var(--ox-ease)}
#quickOtacModal .qotac-contract-status:not(:empty){margin-top:8px;animation:oxRise .35s var(--ox-ease)}
#quickOtacModal .btn-ghost{height:46px;width:46px;display:grid;place-items:center;border:1.5px solid var(--ox-line);border-radius:12px;background:#fff;color:var(--ox-navy);transition:background .2s,transform .2s var(--ox-ease)}
#quickOtacModal .btn-ghost:hover{background:var(--ox-navy);color:#fff;transform:translateY(-1px)}
/* devices stepper */
#quickOtacModal .ox-step{display:flex;gap:8px}
#quickOtacModal .ox-step input{text-align:center;font-weight:700;-moz-appearance:textfield}
#quickOtacModal .ox-step input::-webkit-outer-spin-button,#quickOtacModal .ox-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#quickOtacModal .ox-step button{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--ox-line);background:#fff;color:var(--ox-navy);font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s,transform .15s}
#quickOtacModal .ox-step button:hover{background:var(--ox-navy);color:#fff}
#quickOtacModal .ox-step button:active{transform:scale(.92)}
#quickOtacModal .ox-classes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#quickOtacModal .ox-class>span{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:.82rem;font-weight:700;color:var(--ox-navy)}
#quickOtacModal .ox-class>span i{color:var(--ox-sand-d)}
#quickOtacModal .ox-classes .ox-step{gap:6px}
#quickOtacModal .ox-classes .ox-step button{width:40px}
.ox-flag{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 8px;border-radius:999px;background:#FFF3DC;color:#8a5a00;font-size:.7rem;font-weight:700;animation:oxPopIn .35s var(--ox-ease)}
/* primary action */
#quickOtacModal .btn-gold{position:relative;overflow:hidden;height:50px;padding:0 18px!important;border:0;border-radius:13px;font-weight:800;letter-spacing:.2px;color:var(--ox-navy);
  background:linear-gradient(135deg,#e2c397,var(--ox-sand) 55%,var(--ox-sand-d));box-shadow:0 10px 22px -10px rgba(184,138,87,.8);transition:transform .25s var(--ox-ease),box-shadow .25s}
#quickOtacModal .btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ox-ease)}
#quickOtacModal .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(184,138,87,.9)}
#quickOtacModal .btn-gold:hover::after{transform:translateX(120%)}
#quickOtacModal .btn-gold:active{transform:translateY(0) scale(.99)}
#quickOtacModal .btn-gold.is-busy{pointer-events:none;opacity:.8}
#quickOtacModal .btn-gold.is-busy i{animation:oxSpin .8s linear infinite}

/* ---------- List ---------- */
.ocx{position:relative;transition:transform .25s var(--ox-ease),box-shadow .25s,background .2s}
@media (hover:hover){.ocx:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(22,45,76,.45)}}
.ocx-acts button{transition:transform .2s var(--ox-ease),background .2s,color .2s,box-shadow .2s}
.ocx-acts button:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 6px 12px -6px rgba(22,45,76,.5)}
.ocx-acts button:active{transform:scale(.94)}
.ocx-acts button:focus-visible,.oc-cp:focus-visible,.oc-chips button:focus-visible{outline:2px solid var(--ox-sand);outline-offset:2px}
.ocx-codebox{transition:box-shadow .2s,border-color .2s}
.ocx:hover .ocx-codebox{box-shadow:0 0 0 2px rgba(206,165,119,.35)}
.oc-live i{animation:oxLive 1.8s ease-out infinite}
.oc-life-fill{transition:width .9s var(--ox-ease)}
.oc-chips>*{transition:transform .2s var(--ox-ease),box-shadow .2s}
.oc-chips>*:hover{transform:translateY(-1px)}
.oc-search input:focus{box-shadow:0 0 0 4px rgba(206,165,119,.22)}

@keyframes oxPop{to{opacity:1;transform:none}}
@keyframes oxRise{to{opacity:1;transform:none}}
@keyframes oxPopIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes oxSpin{to{transform:rotate(360deg)}}
@keyframes oxLive{0%{box-shadow:0 0 0 0 rgba(18,161,91,.55)}100%{box-shadow:0 0 0 7px rgba(18,161,91,0)}}
@media (max-width:520px){#quickOtacModal{align-items:flex-end;padding:0}#quickOtacModal .modal-box{width:100%;border-radius:22px 22px 0 0;max-height:92dvh}}
@media (prefers-reduced-motion:reduce){#quickOtacModal *,.ocx,.ocx *{animation:none!important;transition:none!important}#quickOtacModal .modal-box,#quickOtacModal .form-row{opacity:1;transform:none}}

/* ---------- Requests: nav buttons + drawer (js/188) ---------- */
.ox-reqnav{display:flex;gap:8px;flex:none;align-items:center}
.ox-nav{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1.5px solid var(--ox-line);background:#fff;color:var(--ox-navy);font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ox-ease),background .2s,color .2s,box-shadow .2s}
.ox-nav:hover{transform:translateY(-1px);background:var(--ox-navy);color:#fff}
.ox-nav b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#eef1f5;color:var(--ox-navy);font-size:.72rem}
.ox-reqnav.has-items .ox-nav[data-ox="pending"]{border-color:var(--ox-sand);background:#FFF6E6}
.ox-reqnav.has-items .ox-nav[data-ox="pending"] b{background:var(--ox-sand);color:var(--ox-navy);animation:oxBadge 2s ease-out infinite}
.ox-reqnav.has-items .ox-nav[data-ox="pending"]:hover{background:var(--ox-navy)}
@keyframes oxBadge{0%{box-shadow:0 0 0 0 rgba(206,165,119,.7)}100%{box-shadow:0 0 0 8px rgba(206,165,119,0)}}

#oxReq{position:fixed;inset:0;z-index:9000;pointer-events:none}
#oxReq .oxr-scrim{position:absolute;inset:0;background:rgba(10,20,36,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
#oxReq .oxr-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(560px,100%);display:flex;flex-direction:column;background:#f6f7f9;box-shadow:-24px 0 60px -20px rgba(10,20,36,.5);transform:translateX(100%);transition:transform .45s var(--ox-ease)}
[dir="rtl"] #oxReq .oxr-panel{transform:translateX(-100%)}
#oxReq.is-open{pointer-events:auto}
#oxReq.is-open .oxr-scrim{opacity:1}
#oxReq.is-open .oxr-panel{transform:none}
.oxr-panel header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ox-navy)}
.oxr-tabs{display:flex;gap:6px;flex:1}
.oxr-tabs button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:0;background:transparent;color:#c9d3e0;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .2s,color .2s}
.oxr-tabs button.is-on{background:var(--ox-sand);color:var(--ox-navy)}
.oxr-tabs button b{min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:.72rem}
.oxr-x{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:transform .3s var(--ox-ease),background .2s}
.oxr-x:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.oxr-body{flex:1;overflow:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:10px}
.oxr-card{display:flex;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--ox-line);border-inline-start:4px solid #cfd6df;animation:oxRise .4s var(--ox-ease) both;transition:box-shadow .2s,transform .2s var(--ox-ease)}
.oxr-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(22,45,76,.5)}
.oxr-pending{border-inline-start-color:#E8A317}.oxr-approved{border-inline-start-color:#12a15b}.oxr-rejected{border-inline-start-color:#d6453d}.oxr-expired{border-inline-start-color:#8d97a6}
.oxr-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ox-navy);color:var(--ox-sand);font-weight:800;font-size:.8rem}
.oxr-main{flex:1;min-width:0}
.oxr-l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.oxr-l1 b{color:var(--ox-navy)}.oxr-l1 em{font-style:normal;font-weight:800;color:var(--ox-sand-d);font-size:.8rem}
.oxr-kind{padding:1px 8px;border-radius:999px;background:#eef1f5;color:var(--ox-mute);font-size:.68rem;font-weight:700}
.oxr-l2,.oxr-l3{font-size:.8rem;color:var(--ox-ink);margin-top:2px;overflow:hidden;text-overflow:ellipsis}.oxr-l3{color:var(--ox-mute)}
.oxr-meta{margin-top:6px;font-size:.72rem;color:var(--ox-mute)}
.oxr-vs{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.oxr-v{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:capitalize}
.oxr-v.ok{background:#E3F6EC;color:#0b7a43}.oxr-v.bad{background:#FDE7E5;color:#b3261e}
.oxr-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.oxr-st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:800;background:#eef1f5;color:var(--ox-mute)}
.oxr-pending .oxr-st{background:#FFF3DC;color:#8a5a00}.oxr-approved .oxr-st{background:#E3F6EC;color:#0b7a43}.oxr-rejected .oxr-st{background:#FDE7E5;color:#b3261e}
.oxr-side small{font-size:.68rem;color:var(--ox-mute)}
.oxr-go,.oxr-no{height:32px;padding:0 12px;border-radius:9px;border:0;font-weight:800;font-size:.76rem;cursor:pointer;transition:transform .2s var(--ox-ease),box-shadow .2s}
.oxr-go{background:linear-gradient(135deg,#e2c397,var(--ox-sand));color:var(--ox-navy)}.oxr-go:hover{transform:translateY(-1px);box-shadow:0 8px 16px -8px rgba(184,138,87,.9)}
.oxr-no{background:#fff;color:#b3261e;border:1.5px solid #f1c6c3}.oxr-no:hover{background:#FDE7E5}
.oxr-filters{display:flex;gap:6px;flex-wrap:wrap}
.oxr-filters button{height:30px;padding:0 12px;border-radius:999px;border:1.5px solid var(--ox-line);background:#fff;font-weight:700;font-size:.75rem;color:var(--ox-navy);cursor:pointer}
.oxr-filters button.is-on{background:var(--ox-navy);color:#fff;border-color:var(--ox-navy)}
.oxr-q{height:42px;padding:0 14px;border-radius:12px;border:1.5px solid var(--ox-line);background:#fff;font-size:.88rem}
.oxr-q:focus{outline:0;border-color:var(--ox-sand);box-shadow:0 0 0 4px rgba(206,165,119,.22)}
.oxr-warn{padding:10px 12px;border-radius:10px;background:#FFF3DC;color:#8a5a00;font-size:.78rem;font-weight:600}
.oxr-empty{display:grid;place-items:center;gap:8px;padding:48px 12px;color:var(--ox-mute);font-weight:600}.oxr-empty i{font-size:1.8rem;color:var(--ox-sand)}
.oxr-note{font-size:.7rem;color:var(--ox-mute);text-align:center;margin:6px 0 0}
@media (max-width:760px){.ox-reqnav{width:100%}.oxr-card{flex-wrap:wrap}.oxr-side{width:100%;flex-direction:row;align-items:center;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){#oxReq *,.ox-nav b{animation:none!important;transition:none!important}}