: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;
}

/* Keep scrolling, hide scrollbar (page-level) */
html, body{
  overflow: auto;              /* or leave default */
  -ms-overflow-style: none;    /* IE/old Edge */
  scrollbar-width: none;       /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

* {
	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;
  gap:14px;
  grid-template-columns: min(720px, 100%);
  justify-content: center;
}

@media (max-width: 1100px) {
	.grid {
		grid-template-columns: 2fr;
	}
}

.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");
}

/* ============================================================
   App cards (JApps home)
   ============================================================ */
/* Section card: holds multiple apps */
.appSection{
  width: 100%;
  max-width: 720px;
}

/* inner grid of apps within a section */
.appSectionGrid{
  padding: 14px;
  display: grid;
  gap: 14px;
  
  /* tile layout inside the section */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center;
}

/* app tile inside a section */
.appTile{
  width: 100%;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.appTileTop{
  padding: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}

.appTileTitle{
  font-weight: 800;
  letter-spacing: .2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appCard {
	width: fit-content;
	min-width: 320px;
}

.appLink {
	display: block;
	color: inherit;
	text-decoration: none;
}

.appBody {
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.appIcon {
	width:		128px;
	height:		128px;
	min-width:  64px;
	min-height: 64px;
	aspect-ratio: 1 / 1;
	
	display: flex;
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
	background: rgba(0, 0, 0, .18);
	object-fit: cover;
	/* good for non-ico images; harmless otherwise */

	transition: transform 160ms ease;
	-webkit-tap-highlight-color: transparent;
	z-index: 20;
}

.appIcon:hover {
	transform: scale(1.05);
}

.appIcon:active {
	transform: scale(0.95);
}

/* Icon-only clickable area */
.appIconLink {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	flex-direction: column;
	border-radius: 12px;
	/* match .appIcon */
	/* overflow: hidden; */
	gap: 8px;
	/* clips image corners cleanly */
	outline: none;
	/* we’ll replace default outline */
	-webkit-tap-highlight-color: transparent;
}

/* Focus ring should be on the anchor (the focusable thing) */
.appIconLink:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255, 204, 102, .65),
    0 0 0 7px rgba(0, 0, 0, .25);
}

.appIconLink:active{
  box-shadow:
    0 0 0 3px rgba(255, 204, 102, .55),
    0 0 0 7px rgba(0, 0, 0, .22);
}

/* Hover polish to make it feel clickable */
.appCard {
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* .appCard:hover{
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
} */

/* .appCard:active{
  transform: translateY(0px);
} */

.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;
	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 Dock (iOS rubber-band safe) ===== */
.tabsBar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 9999;
  pointer-events: none;

  /* this is the dock area that will cover the bottom “border” space */
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: env(safe-area-inset-bottom);
}

/* Dock underlay that fills to the very bottom even during overscroll */
.tabsBar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height: calc(env(safe-area-inset-bottom) + 64px);

  background: transparent;

  pointer-events:none;
}

/* The actual pill stays “lifted” */
.tabsBar .tabs{
  pointer-events: auto;

  display:flex;
  align-items:center;
  justify-content:center;
  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;

  width: min(560px, calc(100vw - 24px));
  overflow: hidden;
  margin: 0 auto 12px auto;
}


@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));
	align-items: center;
	display: flex;
	flex-direction: column;
}

/* 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;
}

/* ============================================================
   Suggest-a-Tool button + modal
   ============================================================ */

.suggestBtn {
	position: relative;
	appearance: none;
	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);
	text-decoration: none;

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

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

	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;

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

.suggestBtn:hover {
	border-color: rgba(255, 255, 255, .65);
}

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

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

/* Modal overlay */
.modalOverlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
	padding: 16px;
}

.modalOverlay.open {
	opacity: 1;
	pointer-events: auto;
}

.modalCard {
	width: min(480px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	transform: translateY(12px) scale(.97);
	transition: transform 200ms ease;
}

.modalOverlay.open .modalCard {
	transform: translateY(0) scale(1);
}

.modalClose {
	appearance: none;
	border: none;
	background: none;
	color: var(--muted);
	font-size: 22px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 150ms ease;
}

.modalClose:hover {
	color: var(--text);
}

#suggestForm .smallBtn {
	width: 100%;
	padding: 10px;
	font-weight: 800;
	letter-spacing: .2px;
	border-radius: 12px;
}

#suggestForm .smallBtn:disabled {
	opacity: .5;
	cursor: not-allowed;
}