:root{
  --bg:#0b0f17;
  --card:#121a2a;
  --text:#e7edf7;
  --muted:#a9b4c7;
  --border:rgba(255,255,255,.08);
  --good:#3ddc97;
  --warn:#ffcc66;
  --bad:#ff6b6b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ui: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--ui);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(122,162,255,.15), transparent 60%),
    radial-gradient(900px 600px at 85% 40%, rgba(61,220,151,.10), transparent 55%),
    var(--bg);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:
    calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
}

.wrap{ width:min(1040px, 100%); }

header{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}

h1{ font-size:20px; margin:0; letter-spacing:.2px; }

.cornerRefresh{
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
}

@supports (padding: max(0px)) {
  .cornerRefresh{
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

.sub{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
  line-height:1.35;
}

.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.pill{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.15);
  white-space:nowrap;
}

button{
  appearance:none;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  padding:4px 8px;
  border-radius:128px;
  cursor:pointer;
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
}

button:hover{ border-color:rgba(255,255,255,.16); }
button:active{ transform:translateY(1px); }

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width: 1100px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .card.span2{ grid-column: 1 / -1; }
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.btnIcon{
  width:18px;
  height:18px;
  opacity:.9;
  flex:0 0 auto;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  transform: translateY(-.5px);
}

.bgLock{ background-image:url("https://cdn-icons-png.freepik.com/512/8336/8336773.png"); }
.bgFile{ background-image:url("https://cdn-icons-png.freepik.com/512/8336/8336773.png"); }

.card{
	border:1px solid var(--border);
	border-radius:16px;
	overflow:hidden;
	background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.card .head{
  padding:14px 14px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  background: rgba(0,0,0,.18);
}

.card .title{
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}

.tag{
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-family:var(--mono);
  white-space:nowrap;
}

table{ width:100%; border-collapse:collapse; }

thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background: rgba(0,0,0,.10);
  white-space:nowrap;
}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:top;
  font-size:13px;
}

tbody tr:last-child td{ border-bottom:none; }

.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.right{ text-align:right; }

.statusDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 0 3px rgba(61,220,151,.10);
  flex:0 0 auto;
}

.statusDot.warn{
  background:var(--warn);
  box-shadow:0 0 0 3px rgba(255,204,102,.10);
}

.statusDot.bad{
  background:var(--bad);
  box-shadow:0 0 0 3px rgba(255,107,107,.12);
}

.statusDot.off{
  background: rgba(231,237,247,.22);
  box-shadow: 0 0 0 3px rgba(231,237,247,.08);
}

tr.ended td{
  opacity: .65;
}

.footer{
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

code.inline{
  font-family:var(--mono);
  font-size:12px;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  white-space:nowrap;
}

/* Inline hyperlink pill */
a.inlineLink{
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  white-space:nowrap;
}

a.inlineLink:hover{
  border-color: rgba(255,255,255,.16);
  text-decoration: underline;
}

a.inlineLink:active{
  transform: translateY(1px);
}

/* Platform pills */
.platformLinks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:8px;
  align-items:center;
}

a.platformLink{
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space:nowrap;
  flex: 0 0 auto;
}

a.platformLink:hover{
  border-color: rgba(255,255,255,.16);
  text-decoration: underline;
}

a.platformLink:active{
  transform: translateY(1px);
}

.platformIcon{
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: 0 0 auto;
  image-rendering: auto;
}

/* Make the friends table willing to overflow horizontally */
#friendsScroll table{
	width: max-content;
	min-width: 100%;
}

/* Prefer scrolling over wrapping */
#friendsScroll th,
#friendsScroll td{
	white-space: nowrap;
}

/* Sortable headers */
#friendsScroll thead th[data-sort]{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

#friendsScroll thead th[data-sort] .thArrow{
  display: inline-block;
  margin-left: 6px;
  font-size: .55em; /* ~0.5x-ish */
  opacity: .75;
  transform: translateY(-1px);
}

#friendsScroll thead th[data-sort].isActive .thArrow{
  opacity: .95;
}

/* Friend cell: avatar + text never stack */
.friendCell{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
}

/* Avatar should never shrink */
.friendAvatar{
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.friendAvatar.ph{
	background: rgba(255,255,255,.06);
	box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

/* The text block also should not shrink into wrapping */
.friendMeta{
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 0 auto;
}

.friendTop{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.friendSub{
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	font-size: 12px;
	opacity: .78;
}

.friendDisplay{
	font-weight: 800;
	cursor: pointer;
}

.friendCopy{
	cursor: pointer;
}


/* ============================================================
   Horizontal scroll + conditional fade edges
   ============================================================ */

.hScroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Table wrapper */
.tableScroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.tableScroll table{
  min-width: 480px;
}

/* Toolbar fade wrapper needs to clip its ::before/::after */
#toolbarFade{
  overflow:hidden;
  border-radius: 999px; /* matches your pill style */
  max-width: 100%;
  
  background: rgba(0,0,0,.10);
  border: 1px solid var(--border);
  padding: 2px;
}

/* Flexbox gotcha: allow the fadeWrap to shrink inside header */
header > #toolbarFade{
  min-width: 0;
}

/* Fades: only visible when .isScrollable is present.
   Left fade hidden when atStart, right fade hidden when atEnd. */
.fadeScroll::before,
.fadeScroll::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  opacity:0;
  transition: opacity 160ms ease;
}

.fadeScroll::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,15,23,.98), rgba(11,15,23,0));
}

.fadeScroll::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,15,23,.98), rgba(11,15,23,0));
}

.fadeScroll.isScrollable::before,
.fadeScroll.isScrollable::after{
  opacity:1;
}

.fadeScroll.isScrollable.atStart::before{ opacity:0; }
.fadeScroll.isScrollable.atEnd::after{ opacity:0; }

/* Inner scroller stays purely a scroller */
.fadeWrap > .tableScroll,
.fadeWrap > .hScroll{
  position: relative;
}

/* Fades must live on a NON-scrolling wrapper */
.fadeWrap{
  position: relative;
}

/* Fades */
.fadeWrap.fadeScroll::before,
.fadeWrap.fadeScroll::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  opacity:0;
  transition: opacity 240ms ease-out;
  
  z-index: 3;
}

.fadeWrap.fadeScroll::before{
  left:0;
  background: linear-gradient(90deg, rgba(11,15,23,.98), rgba(11,15,23,0));
}

.fadeWrap.fadeScroll::after{
  right:0;
  background: linear-gradient(270deg, rgba(11,15,23,.98), rgba(11,15,23,0));
}

/* Only show when overflow exists */
.fadeWrap.fadeScroll.isScrollable::before,
.fadeWrap.fadeScroll.isScrollable::after{
  opacity:1;
}

.fadeWrap.fadeScroll.isScrollable.atStart::before{ opacity:0; }
.fadeWrap.fadeScroll.isScrollable.atEnd::after{ opacity:0; }

/* Mobile: prefer swipe-scroll instead of wrapping for toolbar + platform row */
@media (max-width: 560px){
  .toolbar{
    flex-wrap: nowrap;
    justify-content:flex-start;
  }
  .platformLinks{
    flex-wrap: nowrap;
  }
  body{
    padding:
      calc(16px + env(safe-area-inset-top))
      calc(16px + env(safe-area-inset-right))
      calc(16px + env(safe-area-inset-bottom))
      calc(16px + env(safe-area-inset-left));
  }
}

/* Themed scrollbars
/* WebKit: Chrome/Safari/Edge */

.tableScroll::-webkit-scrollbar,
.hScroll::-webkit-scrollbar{
  height: 10px;
}

.tableScroll::-webkit-scrollbar-track,
.hScroll::-webkit-scrollbar-track{
  background: transparent;
}

.tableScroll::-webkit-scrollbar-thumb,
.hScroll::-webkit-scrollbar-thumb{
  background: rgba(231,237,247,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.tableScroll::-webkit-scrollbar-thumb:hover,
.hScroll::-webkit-scrollbar-thumb:hover{
  background: rgba(231,237,247,.28);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Firefox */
.tableScroll, .hScroll{
  scrollbar-color: rgba(231,237,247,.22) transparent;
  scrollbar-width: thin;
}

/* ===== Bottom Tabs ===== */
.tabsBar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 12px;

	display: flex;
	justify-content: center;

	z-index: 9999;

	/* allow clicks only on the pill, not the whole bar strip */
	pointer-events: none;

	margin-top: 0;
	border-top: 0;
	
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 12px;
	padding-left: 12px;
}

/* child selector */
.tabsBar .tabs{
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* single row */
	flex-wrap: nowrap;

	gap: 4px;
	padding: 8px;

	border: 1px solid var(--border);
	border-radius: 24px;
	background: rgba(0,0,0,.58);
	transition: background-color 400ms ease, border-color 400ms ease;

	/* keep inside screen bounds */
	width: min(560px, calc(100vw - 24px));
	overflow: hidden;
}

@supports (padding: max(0px)) {
  .tabsBar{
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .tabsBar .tabs{
    /* respect left/right safe areas too */
    width: min(
      300px,
      calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))
    );
  }
}

.tabBtn{
	position: relative;
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	text-decoration: none;

	padding: 8px 12px;
	border-radius: 24px;
	cursor: pointer;

	font-weight: 800;
	font-size: 12px;
	letter-spacing: .2px;

	display: flex;
	align-items: center;
	gap: 8px;
	
	/* squeeze evenly across the row */
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;

	/* never wrap vertically */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

.tabBtn:hover{
  border-color: rgba(255,255,255,.42);
  color: var(--text);
}

.tabBtn.active{
	border: 1px solid rgba(255,255,255,.52);
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
	color: var(--text);
}

.tabBtn.active:hover{
  border-color: rgba(255,255,255,.52);
  color: var(--text);
}

.tabDot{
  width:  8px;
  height: 8px;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  background: rgba(231,237,247,.35);
  flex-shrink: 0;
  flex: 0 0 8px;
}

.tabText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabBtn.active .tabDot{
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(61,220,151,.12);
}

.tabsBar .tabs:hover{
  background: rgba(0,0,0,.88);
}

@media (hover: none){
  .tabsBar .tabs:active{
    background: rgba(0,0,0,.88);
  }
}

/* Page containers */
.page{
  display:none;
}
.page.active{
  display:block;
}

/* ============================================================
   Orb background layer (required for startOrbBackground())
   ============================================================ */

.bgOrbs{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

:root{
  --tabsDockPad: 120px; /* fallback if JS doesn't run */
}

.wrap{
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--tabsDockPad) + env(safe-area-inset-bottom));
}

/* Orb container now holds 2 inner layers that crossfade (morph),
   instead of creating/removing many .bgOrb nodes (layering). */
.bgOrb{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  border-radius: 999px;

  filter: blur(24px);
  opacity: 0;
  mix-blend-mode: screen;

  transform: translate3d(0,0,0);
  will-change: left, top, width, height, transform, opacity, filter;
}

.bgOrbLayer{
  position: absolute;
  inset: 0;
  border-radius: 999px;

  background: radial-gradient(
    circle,
    rgba(var(--rgb), var(--a)) 0%,
    rgba(var(--rgb), 0) 70%
  );

  opacity: 0;
  will-change: opacity;
}

@keyframes orbLife{
  0%{
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.6);
  }
  18%{
    opacity: 0.85;
    transform: translate3d(calc(var(--dx) * 0.25), calc(var(--dy) * 0.25), 0) scale(1.06);
  }
  70%{
    opacity: 0.72;
    transform: translate3d(calc(var(--dx) * 0.85), calc(var(--dy) * 0.85), 0) scale(1.12);
  }
  100%{
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) scale(0.72);
  }
}

/* Settings “hard off” helpers (driven by JS) */
:root.reduceMotion .bgOrbs,
:root.orbsOff .bgOrbs{
  display:none;
}

/* ============================================================
   Settings page form styles
   ============================================================ */

.form{
  padding: 14px;
  display: grid;
  gap: 12px;
}

.field{
  display: grid;
  gap: 6px;
}

.label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--muted);
}

.help{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.controlRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Slider contrast + theme */
.sliderControl input[type="range"]{
  width: min(420px, 100%);
  accent-color: rgb(59, 108, 182);           /* modern browsers */
  height: 28px;                        /* gives thumb room */
  background: transparent;
}

/* WebKit (Safari/iOS/Chrome/Edge) */
.sliderControl input[type="range"]::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(231,237,247,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.sliderControl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: var(--text);
  border: 1px solid rgba(255,255,255,.18);

  /* “glow” to pop off dark bg */
  box-shadow:
    0 0 0 4px rgba(52, 60, 70, 0.18),
    0 6px 18px rgba(0,0,0,.45);

  margin-top: -6px; /* centers thumb on 8px track */
}

.sliderControl input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow:
    0 0 0 5px rgba(96, 123, 158, 0.199),
    0 8px 22px rgba(0,0,0,.55);
}

.sliderControl input[type="range"]:focus{
  outline: none;
}

.sliderControl input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:
    0 0 0 6px rgba(61, 143, 220, 0.28),
    0 8px 22px rgba(0,0,0,.55);
}

/* Firefox */
.sliderControl input[type="range"]::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(231,237,247,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.sliderControl input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 4px rgba(52, 60, 70, 0.18),
    0 6px 18px rgba(0,0,0,.45);
}

input[type="text"],
input[type="number"],
select,
textarea{
  width: 100%;
  color: var(--text);
  background: rgba(0,0,0,.18);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px;
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}

textarea{
  min-height: 120px;
  resize: vertical;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
  border-color: rgba(255,255,255,.18);
}

input[type="color"]{
  width: 46px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  padding: 0;
}

input[type="range"]{
  width: min(420px, 100%);
}

.switch{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.switch input{
  transform: scale(1.15);
}

.smallBtn{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.okPill{
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}

/* =========================================
   Themed <select> controls (Release Notes)
   ========================================= */

.rnControls{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	align-items:center;
	margin-bottom:20px;
}

.rnLabel{
  	/* min-width:40px; */
	width: max-content;
}

.selectWrap{
	position:relative;
	flex:1;
	/* min-width:340px; */
	opacity:1;
}

.selectWrap::after{
	content:"";
	position:absolute;
	right: 10px;
	top:50%;
	width:6px;
	height:6px;
	transform: translateY(-60%) rotate(45deg);
	border-right:2px solid var(--muted);
	border-bottom:2px solid var(--muted);
	pointer-events:none;
	opacity:1;
	background: transparent;
}

.selectWrap select{
	width:100%;
	min-width:80px;
	padding:2px 0 2px 12px;
	border-radius:14px;
	border:1px solid var(--stroke);
	background: rgba(255,255,255,.06);
	color: var(--text);
	font: inherit;
	outline: none;
	height: 24px;

	-webkit-appearance:none;
	appearance:none;
}

.selectWrap select:hover{
  	border-color: rgba(255,255,255,.22);
}

.selectWrap select:focus{
	border-color: rgba(255,255,255,.28);
	box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

.selectWrap select:disabled{
	opacity:.55;
	cursor:not-allowed;
}

.selectWrap option{
	background: #0b1020;
	color: #e9ecff;
}