/* GTA Online regional browsing. Compact dark dropdown + black frosted confirmation sheet. */
body.online-portal[data-online-view="sessions"] .online-region-picker{
 position:relative;
 z-index:18;
 width:min(100%,250px);
 margin:0 0 19px;
}
body.online-portal .online-region-trigger{
 display:flex;
 align-items:center;
 gap:8px;
 width:100%;
 min-height:47px;
 padding:7px 9px;
 border:1px solid rgba(255,255,255,.12);
 border-radius:12px;
 background:rgba(13,13,15,.90);
 -webkit-backdrop-filter:blur(16px) saturate(115%);
 backdrop-filter:blur(16px) saturate(115%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 9px 26px rgba(0,0,0,.15);
 color:#f3f3f4;
 cursor:pointer;
 text-align:left;
 transition:border-color .18s ease,background .18s ease;
}
body.online-portal .online-region-trigger:hover,
body.online-portal .online-region-picker.is-open .online-region-trigger{
 background:rgba(22,22,24,.94);
 border-color:rgba(255,255,255,.23);
}
.online-region-trigger-symbol{
 width:27px;
 height:27px;
 display:grid;
 place-items:center;
 flex:0 0 27px;
 border:1px solid rgba(255,255,255,.10);
 border-radius:9px;
 background:rgba(255,255,255,.035);
 color:#bfc0c5;
}
.online-region-trigger-symbol svg{width:15px;height:15px;display:block}
.online-region-trigger-copy{min-width:0;display:grid;gap:2px;flex:1}
.online-region-trigger-copy>small{
 font:750 7px/1.1 'DM Sans',Arial,sans-serif;
 letter-spacing:.14em;
 color:#85868c;
}
.online-region-trigger-name{min-width:0;display:flex;align-items:baseline;gap:7px}
.online-region-trigger-name strong{
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font:730 11.5px/1.25 'DM Sans',Arial,sans-serif;
 letter-spacing:-.005em;
 color:#ececef;
}
.online-region-trigger-name>span{
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font:500 10px/1.35 'DM Sans',Arial,sans-serif;
 color:#909198;
}
.online-region-trigger-flag{
 flex:0 0 auto;
 font-size:17px;
 line-height:1;
}
.online-region-caret{
 flex:0 0 13px;
 width:13px;
 height:13px;
 color:#97999f;
 transition:transform .18s ease;
}
.online-region-picker.is-open .online-region-caret{transform:rotate(180deg)}
.online-region-menu[hidden]{display:none!important}
.online-region-menu{
 position:absolute;
 top:calc(100% + 7px);
 left:0;right:0;
 z-index:80;
 padding:9px;
 border:1px solid rgba(255,255,255,.13);
 border-radius:13px;
 background:rgba(12,12,14,.97);
 box-shadow:0 22px 56px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.055);
 -webkit-backdrop-filter:blur(26px) saturate(120%);
 backdrop-filter:blur(26px) saturate(120%);
 animation:onlineRegionMenuIn .18s cubic-bezier(.2,.85,.2,1);
}
.online-region-menu-kicker{
 display:block;
 padding:6px 10px 9px;
 color:#777981;
 font:700 8px/1.2 'DM Sans',Arial,sans-serif;
 letter-spacing:.13em;
}
body.online-portal .online-region-option{
 display:flex;
 gap:12px;
 align-items:center;
 min-height:47px;
 width:100%;
 padding:8px 10px;
 border:1px solid transparent;
 border-radius:9px;
 color:#eeeef0;
 background:transparent;
 cursor:pointer;
 text-align:left;
}
body.online-portal .online-region-option+.online-region-option{margin-top:2px}
body.online-portal .online-region-option:hover,
body.online-portal .online-region-option:focus-visible{background:rgba(255,255,255,.065)}
body.online-portal .online-region-option[aria-pressed="true"]{
 background:rgba(255,255,255,.085);
 border-color:rgba(255,255,255,.09);
}
.online-region-option-flag{
 width:28px;height:28px;flex:0 0 28px;
 display:grid;place-items:center;
 border-radius:8px;
 background:rgba(255,255,255,.04);
 font-size:19px;
}
.online-region-option-copy{display:grid;gap:4px;flex:1;min-width:0}
.online-region-option-copy strong{font:700 12px/1.2 'DM Sans',Arial,sans-serif;color:#efeff1}
.online-region-option-copy small{font:500 10px/1.2 'DM Sans',Arial,sans-serif;color:#93949a}
.online-region-option-check{width:16px;height:16px;flex:0 0 16px;color:#e5e5e7;opacity:0}
.online-region-option[aria-pressed="true"] .online-region-option-check{opacity:1}
.online-region-summary{
 position:absolute!important;
 width:1px!important;
 height:1px!important;
 overflow:hidden!important;
 clip-path:inset(50%)!important;
 white-space:nowrap!important;
}
@keyframes onlineRegionMenuIn{
 from{opacity:0;transform:translateY(-5px)}
 to{opacity:1;transform:translateY(0)}
}

/* Native GTA Online bottom sheet, refined into a compact charcoal-glass confirmation. */
html body.online-portal .online-region-confirm-dialog{
 inset:auto 22px 20px auto;
 display:block;
 width:min(405px,calc(100vw - 44px));
 height:auto!important;
 max-height:calc(100dvh - 34px)!important;
 margin:0;
 padding:0;
 border:0;
 overflow:visible;
 background:transparent;
 color:#f1f1f3;
}
html body.online-portal .online-region-confirm-dialog:not([open]){display:none!important}
html body.online-portal .online-region-confirm-dialog::backdrop{
 background:rgba(0,0,0,.65)!important;
 -webkit-backdrop-filter:blur(11px) saturate(90%)!important;
 backdrop-filter:blur(11px) saturate(90%)!important;
}
html body.online-portal .online-region-confirm-dialog>.online-region-confirm-sheet{
 position:relative!important;
 inset:auto!important;
 width:100%!important;
 height:auto!important;
 max-height:calc(100dvh - 34px)!important;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.13)!important;
 border-radius:19px!important;
 background:linear-gradient(157deg,rgba(20,19,22,.91),rgba(5,5,7,.92) 60%,rgba(3,3,5,.94))!important;
 -webkit-backdrop-filter:blur(34px) saturate(112%)!important;
 backdrop-filter:blur(34px) saturate(112%)!important;
 box-shadow:0 28px 78px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.045)!important;
 --gta-accent:var(--online-gold);
}
html body.online-portal .online-region-confirm-dialog>.online-region-confirm-sheet::before,
html body.online-portal .online-region-confirm-dialog>.online-region-confirm-sheet::after{
 display:none!important;
 content:none!important;
 animation:none!important;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-grip{
 height:24px;
 flex-basis:24px;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-grip span{
 width:43px;height:4px;
 background:rgba(255,255,255,.25);
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-top{
 display:block!important;
 grid-template-columns:1fr!important;
 padding:1px 20px 15px!important;
 border-bottom:1px solid rgba(255,255,255,.075)!important;
 box-shadow:none!important;
 background:transparent!important;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-heading>small{
 display:block;
 margin:0 0 10px;
 color:var(--online-gold)!important;
 font:700 8px/1.1 'DM Sans',Arial,sans-serif!important;
 letter-spacing:.16em;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-title-row h3{
 display:block!important;
 margin:0!important;
 color:var(--online-text)!important;
 -webkit-text-fill-color:var(--online-text)!important;
 font:750 21px/1.2 'DM Sans',Arial,sans-serif!important;
 letter-spacing:-.025em;
 text-transform:none!important;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-title-row h3 [data-region-target-name]{
 color:var(--online-text)!important;
 -webkit-text-fill-color:var(--online-text)!important;
 display:inline;
 text-decoration-line:underline;
 text-decoration-color:var(--online-red);
 text-decoration-thickness:2px;
 text-underline-offset:5px;
 text-decoration-skip-ink:none;
}
html body.online-portal .online-region-confirm-dialog .gta-online-sheet-heading p{
 margin:7px 0 0!important;
 font:500 11px/1.5 'DM Sans',Arial,sans-serif!important;
 color:#98989f!important;
}
html body.online-portal .online-region-confirm-dialog .gta-online-menu-body{
 min-height:0;
 flex:0 1 auto!important;
 overflow-y:auto;
 overflow-x:hidden;
 max-height:calc(100dvh - 125px);
 overscroll-behavior:contain;
 background:transparent!important;
}
html body.online-portal .online-region-confirm-dialog .gta-online-menu-copy{
 padding:16px 20px max(19px,env(safe-area-inset-bottom,0px))!important;
 background:transparent!important;
}
.online-region-confirm-body{display:grid;gap:15px}
.online-region-confirm-warning{
 display:flex;
 align-items:flex-start;
 gap:11px;
 border:0!important;
 padding:0!important;
 background:transparent!important;
}
.online-region-confirm-warning svg{
 width:16px;height:16px;
 flex:0 0 16px;
 margin-top:2px;
 color:var(--online-gold);
}
.online-region-confirm-warning p{
 display:grid;
 gap:4px;
 margin:0;
 color:#a3a3ac;
 font:500 11.5px/1.6 'DM Sans',Arial,sans-serif;
}
.online-region-confirm-warning strong{
 color:var(--online-gold);
 font:750 11.5px/1.4 'DM Sans',Arial,sans-serif;
}
.online-region-confirm-warning span{color:#999aa3}
.online-region-confirm-help{
 display:inline-flex;
 align-items:center;
 gap:8px;
 width:max-content;
 min-height:29px;
 padding:0;
 margin-top:-3px;
 color:#ced0d6;
 font:650 11px/1.4 'DM Sans',Arial,sans-serif;
 text-decoration:none;
}
.online-region-confirm-help:hover{color:#f3f3f4}
.online-region-confirm-help svg{
 width:14px;height:14px;
 color:#a4a6af;
}
.online-region-confirm-ack{
 display:flex;
 align-items:flex-start;
 gap:10px;
 padding:13px 0 0;
 border-top:1px solid rgba(255,255,255,.075);
 cursor:pointer;
}
.online-region-confirm-ack input{
 flex:0 0 18px;
 width:18px;height:18px;
 margin:0;
 accent-color:var(--online-red);
 cursor:pointer;
}
.online-region-confirm-ack span{
 color:#c6c5cd;
 font:600 11.5px/1.5 'DM Sans',Arial,sans-serif;
}
.online-region-confirm-ack.is-locked{cursor:default}
.online-region-confirm-ack.is-locked input{opacity:.34;cursor:not-allowed}
.online-region-confirm-ack.is-locked span{color:#83838b}
.online-region-confirm-wait{
 min-height:13px;
 margin:-8px 0 -2px;
 padding-left:28px;
 color:#a98e93;
 font:650 10px/1.3 'DM Sans',Arial,sans-serif;
 font-variant-numeric:tabular-nums;
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-actions{
 display:grid!important;
 grid-template-columns:minmax(0,94px) minmax(0,1fr);
 align-items:stretch;
 gap:9px;
 margin:0!important;
 padding:0!important;
 border:0!important;
 background:transparent!important;
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-cancel,
html body.online-portal .online-region-confirm-dialog .online-region-confirm-continue{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 width:100%;
 min-height:42px;
 margin:0;
 padding:10px 13px;
 border-radius:999px!important;
 font:700 11.5px/1.2 'DM Sans',Arial,sans-serif!important;
 cursor:pointer;
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-cancel{
 border:1px solid rgba(255,255,255,.12)!important;
 color:#9b9ba4!important;
 background:rgba(255,255,255,.025)!important;
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-continue{
 border:1px solid rgba(255,255,255,.22)!important;
 color:#f5f5f5!important;
 background:linear-gradient(140deg,rgba(255,255,255,.155),rgba(255,255,255,.07))!important;
 background-image:linear-gradient(140deg,rgba(255,255,255,.155),rgba(255,255,255,.07))!important;
 -webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 7px 15px rgba(0,0,0,.19)!important;
}
.online-region-confirm-continue svg{width:14px;height:14px}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-continue:disabled{
 opacity:.30!important;
 cursor:not-allowed!important;
 filter:grayscale(1);
 box-shadow:none!important;
}
html body.online-portal .online-region-confirm-dialog .is-dragging{transition:none!important}
html body.online-portal .online-region-confirm-dialog :is(button,a,input):focus-visible{
 outline:2px solid var(--online-gold);
 outline-offset:3px;
}
@media(max-width:760px){
 body.online-portal[data-online-view="sessions"] .online-region-picker{width:min(100%,250px);margin-bottom:17px}
 body.online-portal .online-region-trigger{min-height:47px}
 .online-region-trigger-name>span{display:none}
 html body.online-portal .online-region-confirm-dialog{
  inset:auto 0 0;
  width:100%;
  max-height:calc(100dvh - 16px)!important;
 }
 html body.online-portal .online-region-confirm-dialog>.online-region-confirm-sheet{
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:20px 20px 0 0!important;
  max-height:calc(100dvh - 16px)!important;
 }
 html body.online-portal .online-region-confirm-dialog .gta-online-menu-body{
  max-height:calc(100dvh - 96px);
 }
 html body.online-portal .online-region-confirm-dialog .gta-online-menu-copy{
  padding:15px 19px max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))!important;
 }
}
@media(max-width:390px){
 .online-region-trigger-name>span{display:none}
 html body.online-portal .online-region-confirm-dialog .gta-online-sheet-title-row h3{font-size:20px!important}
}
@media(prefers-reduced-motion:reduce){
 .online-region-caret{transition:none}
 .online-region-menu{animation:none}
}

/* Programmatic focus announces the sheet title without a blue input-like ring. */
html body.online-portal .online-region-confirm-dialog #online-region-confirm-title:focus{outline:none!important}

/* Consistent region picker alignment at the existing compact 250px width. */
body.online-portal[data-online-view="sessions"] .online-region-trigger{
 display:grid;
 grid-template-columns:27px minmax(0,1fr) 20px 14px;
 align-items:center;
 column-gap:8px;
}
body.online-portal .online-region-trigger-symbol{
 grid-column:1;
 place-self:center;
}
body.online-portal .online-region-trigger-copy{
 grid-column:2;
 width:100%;
 min-width:0;
 justify-self:stretch;
}
body.online-portal .online-region-trigger-name strong{
 display:block;
 max-width:100%;
}
body.online-portal .online-region-trigger-flag{
 grid-column:3;
 justify-self:center;
 font-size:17px;
}
body.online-portal .online-region-caret{
 grid-column:4;
 justify-self:end;
}
body.online-portal .online-region-option{
 display:grid;
 grid-template-columns:28px minmax(0,1fr) 16px;
 column-gap:10px;
 align-items:center;
}
body.online-portal .online-region-option-flag{grid-column:1}
body.online-portal .online-region-option-copy{grid-column:2}
body.online-portal .online-region-option-check{grid-column:3;justify-self:center}

/* Custom grayscale checkbox ensures a white fill and black tick in iOS Safari. */
html body.online-portal .online-region-confirm-dialog input[data-region-ack]{
 -webkit-appearance:none!important;
 appearance:none!important;
 display:grid;
 place-content:center;
 box-sizing:border-box;
 flex:0 0 18px;
 width:18px;
 height:18px;
 min-width:18px;
 margin:0;
 padding:0;
 border:1.5px solid rgba(255,255,255,.42)!important;
 border-radius:5px;
 background:rgba(255,255,255,.025)!important;
 box-shadow:none!important;
 cursor:pointer;
 transition:background-color .16s ease,border-color .16s ease;
}
/* SVG background keeps the tick reliably black on Safari's custom checkbox. */
html body.online-portal .online-region-confirm-dialog input[data-region-ack]:checked{
 border-color:#fff!important;
 background-color:#fff!important;
 background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3.5 8 6.5 11 12.5 4.5%22 fill=%22none%22 stroke=%22%230b0b0c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E')!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
 background-size:15px 15px!important;
}
html body.online-portal .online-region-confirm-dialog input[data-region-ack]:disabled{
 cursor:not-allowed;
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-wait{
 color:var(--online-muted);
}
html body.online-portal .online-region-confirm-dialog .online-region-confirm-warning p>span{
 font-style:italic;
 color:var(--online-muted);
}
@media(prefers-reduced-motion:reduce){
 html body.online-portal .online-region-confirm-dialog input[data-region-ack]{transition:none!important}
}


/* 04 Nov: narrow squared-off region switcher aligned with the marked left area. */
body.online-portal[data-online-view="sessions"] .online-region-picker{
 width:min(100%,200px);
 max-width:200px;
 margin-inline:0 auto;
 margin-bottom:17px;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger{
 display:grid;
 grid-template-columns:25px minmax(0,1fr) 20px 12px;
 column-gap:5px;
 align-items:center;
 width:100%;
 height:60px;
 min-height:60px;
 padding:7px 8px;
 border:1px solid rgba(255,255,255,.15);
 border-radius:3px;
 background:rgba(12,12,14,.94);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.15);
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-symbol{
 width:25px;
 height:25px;
 min-width:25px;
 border-radius:2px;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-symbol svg{
 width:15px;
 height:15px;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-copy{
 gap:1px;
 align-self:center;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-copy>small{
 color:var(--online-muted);
 font:700 7px/1.12 'DM Sans',Arial,sans-serif;
 letter-spacing:.115em;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-name strong{
 font:700 11px/1.22 'DM Sans',Arial,sans-serif;
 letter-spacing:-.01em;
 color:var(--online-text);
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-flag{
 font-size:17px;
}
body.online-portal[data-online-view="sessions"] .online-region-caret{
 width:12px;
 height:12px;
 flex-basis:12px;
}
body.online-portal[data-online-view="sessions"] .online-region-menu{
 top:calc(100% + 5px);
 padding:6px;
 border-radius:3px;
}
body.online-portal[data-online-view="sessions"] .online-region-option{
 min-height:46px;
 border-radius:2px;
 padding:7px;
 gap:7px;
}
body.online-portal[data-online-view="sessions"] .online-region-option-flag{border-radius:2px}
@media(max-width:760px){
 body.online-portal[data-online-view="sessions"] .online-region-picker{
  width:min(100%,200px);
  max-width:200px;
  margin-left:0;
  margin-right:auto;
 }
 body.online-portal[data-online-view="sessions"] .online-region-trigger{
  height:60px;
  min-height:60px;
 }
}
@media(max-width:350px){
 body.online-portal[data-online-view="sessions"] .online-region-picker{width:min(100%,192px);max-width:192px}
}


/* A compact edge-attached address ribbon: flat at the viewport, angled on the far side. */
body.online-portal[data-online-view="sessions"] .online-browser-server>.online-address-details{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 justify-content:flex-start;
 gap:9px;
 width:min(100%,360px);
 min-width:0;
 max-width:100%;
}
body.online-portal[data-online-view="sessions"] .online-address-label{
 display:block;
 margin:0;
 color:var(--online-muted);
 font:750 9px/1.25 'DM Sans',Arial,sans-serif;
 letter-spacing:.14em;
}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address-row.online-address-mark{
 --address-edge-bleed:0px;
 position:relative;
 isolation:isolate;
 display:flex;
 align-items:center;
 justify-content:flex-start;
 box-sizing:border-box;
 gap:7px;
 width:max-content;
 max-width:calc(100% - 7px);
 min-width:0;
 min-height:40px;
 margin:3px 0 2px;
 padding:0 18px 0 8px;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
}
body.online-portal[data-online-view="sessions"] .online-address-mark::before,
body.online-portal[data-online-view="sessions"] .online-address-mark::after{
 content:"";
 position:absolute;
 display:block;
 pointer-events:none;
 transform:none;
 border:0;
 border-radius:0;
}
body.online-portal[data-online-view="sessions"] .online-address-mark::before{
 z-index:-2;
 top:-4px;
 bottom:4px;
 left:calc(-1 * var(--address-edge-bleed));
 right:4px;
 background:#ebebea;
 clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%,0 calc(100% - 2px),calc(100% - 15px) calc(100% - 2px),calc(100% - 2px) 2px,0 2px);
}
body.online-portal[data-online-view="sessions"] .online-address-mark::after{
 z-index:-1;
 inset:0 0 0 calc(-1 * var(--address-edge-bleed));
 background:#ebebea;
 clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address{
 position:relative;
 display:block;
 margin:0;
 min-width:0;
 max-width:100%;
 color:#171719;
 font:700 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
 white-space:nowrap;
 overflow-wrap:anywhere;
}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address-copy{
 position:relative;
 display:grid;
 place-items:center;
 box-sizing:border-box;
 width:32px;
 height:32px;
 flex:0 0 32px;
 margin:0;
 padding:0;
 border:0;
 border-radius:0;
 background:transparent;
 color:#202024;
}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address-copy:hover{
 background:rgba(0,0,0,.06);
 color:#000;
}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address-copy.copied{color:#17683c}
body.online-portal[data-online-view="sessions"] .online-address-details .online-address-copy .icon{
 display:block;
 width:16px;
 height:16px;
}
body.online-portal[data-online-view="sessions"] .online-address-help{
 display:flex;
 align-items:center;
 gap:8px;
 max-width:100%;
 min-height:18px;
 margin:0;
 color:var(--online-muted);
 font:500 10px/1.45 'DM Sans',Arial,sans-serif;
}
body.online-portal[data-online-view="sessions"] .online-address-help svg{
 display:block;
 width:15px;
 height:15px;
 flex:0 0 15px;
 margin:0;
 color:#8e2328;
}
body.online-portal[data-online-view="sessions"] .online-address-help span{
 display:block;
 margin:0;
 line-height:1.45;
}
@media(max-width:760px){
 body.online-portal[data-online-view="sessions"] .online-browser-server>.online-address-details{
  width:min(100%,340px);
 }
 body.online-portal[data-online-view="sessions"] .online-address-details .online-address-row.online-address-mark{
  --address-edge-bleed:20px;
  width:max-content;
  max-width:calc(100% - 7px);
  min-height:38px;
  padding:0 16px 0 8px;
 }
 body.online-portal[data-online-view="sessions"] .online-address-details .online-address{
  font-size:10px;
 }
 body.online-portal[data-online-view="sessions"] .online-address-label{
  font-size:8px;
 }
 body.online-portal[data-online-view="sessions"] .online-address-help{
  font-size:9.5px;
 }
}
@media(max-width:340px){
 body.online-portal[data-online-view="sessions"] .online-address-details .online-address-row.online-address-mark{
  padding:0 15px 0 6px;
  gap:5px;
 }
 body.online-portal[data-online-view="sessions"] .online-address-details .online-address{
  font-size:9px;
  white-space:normal;
 }
}


/* Live region indicator. These colors reuse the existing GTA Online palette. */
body.online-portal[data-online-view="sessions"] .online-region-trigger-name{
 display:flex;
 align-items:center;
 gap:5px;
 min-width:0;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-name>.online-region-live-dot{
 display:inline-block;
 align-self:center;
 flex:0 0 7px;
 width:7px;
 height:7px;
 min-width:7px;
 min-height:7px;
 margin:0;
 padding:0;
 border:0;
 border-radius:50%;
 background:var(--online-gold);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--online-gold) 12%,transparent);
 overflow:visible;
 line-height:0;
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-name>.online-region-live-dot[data-state="online"]{
 background:#69d698;
 box-shadow:0 0 0 3px rgba(105,214,152,.13);
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-name>.online-region-live-dot[data-state="offline"]{
 background:var(--online-red);
 box-shadow:0 0 0 3px rgba(255,48,56,.14);
}
body.online-portal[data-online-view="sessions"] .online-region-trigger-name>.online-region-live-dot[data-state="checking"]{
 background:var(--online-gold);
 box-shadow:0 0 0 3px rgba(255,176,0,.14);
}


/* Individual live region status in the options and compact copy confirmation toast. */
/* Tone down only the shifted address outline, not the white address face. */
html body.online-portal[data-online-view="sessions"] .online-address-mark::before{
 background:#d2d2d0;
}
html body.online-portal[data-online-view="sessions"] .online-region-option-name{
 display:inline-flex;
 align-items:center;
 gap:7px;
 min-width:0;
 max-width:100%;
}
html body.online-portal[data-online-view="sessions"] .online-region-option-name strong{
 display:block;
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
html body.online-portal[data-online-view="sessions"] .online-region-option-live-dot{
 display:inline-block;
 flex:0 0 7px;
 width:7px;
 height:7px;
 padding:0;
 margin:0;
 border:0;
 border-radius:50%;
 background:var(--online-gold);
 box-shadow:0 0 0 3px rgba(255,176,0,.14);
}
html body.online-portal[data-online-view="sessions"] .online-region-option-live-dot[data-state="online"]{
 background:#69d698;
 box-shadow:0 0 0 3px rgba(105,214,152,.13);
}
html body.online-portal[data-online-view="sessions"] .online-region-option-live-dot[data-state="offline"]{
 background:var(--online-red);
 box-shadow:0 0 0 3px rgba(255,48,56,.14);
}
html body.online-portal[data-online-view="sessions"] .online-region-option-live-dot[data-state="checking"]{
 background:var(--online-gold);
 box-shadow:0 0 0 3px rgba(255,176,0,.14);
}
/* A single toast works both on the page and in the top-layer session dialog. */
html body.online-portal .online-copied-toast{
 position:fixed!important;
 top:22px;
 left:50%;
 z-index:2147483000;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 padding:9px 14px;
 width:max-content;
 max-width:calc(100vw - 28px);
 border:1px solid rgba(255,255,255,.16);
 border-radius:999px;
 background:rgba(34,34,37,.88);
 -webkit-backdrop-filter:blur(18px) saturate(115%);
 backdrop-filter:blur(18px) saturate(115%);
 box-shadow:0 12px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07);
 color:#f5f5f6;
 font:700 12px/1.25 'DM Sans',Arial,sans-serif;
 letter-spacing:.01em;
 white-space:nowrap;
 pointer-events:none;
 opacity:0;
 visibility:hidden;
 transform:translate3d(-50%,-9px,0);
 transition:opacity .18s ease,transform .23s cubic-bezier(.16,1,.3,1),visibility .18s ease;
}
html body.online-portal .online-copied-toast.is-visible{
 opacity:1;
 visibility:visible;
 transform:translate3d(-50%,0,0);
}
html body.online-portal .online-copied-toast svg{
 display:block;
 flex:0 0 15px;
 width:15px;
 height:15px;
 color:#f5f5f6;
}
@media(max-width:760px){
 html body.online-portal .online-copied-toast{
  top:max(58px,calc(env(safe-area-inset-top,0px) + 16px));
  padding:8px 13px;
  font-size:11px;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.online-portal .online-copied-toast{transition:none!important}
}