/**
 * Ghostlink – huisstijl bovenop PrivateBin (Bootstrap 5.3)
 * Blauw + zwart, donker, modern.
 *
 * Alleen overrides: PrivateBin-bestanden blijven ongewijzigd.
 */

/* ------------------------------------------------------------------ */
/* 1. Ontwerptokens                                                    */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme=dark] {
	--gl-blue-300: #93c5fd;
	--gl-blue-400: #60a5fa;
	--gl-blue-500: #3b82f6;
	--gl-blue-600: #2563eb;
	--gl-blue-700: #1d4ed8;
	--gl-blue-glow: rgba(37, 99, 235, .35);

	--gl-black: #07080b;
	--gl-surface: rgba(255, 255, 255, .035);
	--gl-surface-2: rgba(255, 255, 255, .06);
	--gl-border: rgba(255, 255, 255, .08);
	--gl-border-strong: rgba(255, 255, 255, .14);
	--gl-text: #e6e8ee;
	--gl-muted: #8b92a5;

	--gl-radius: 14px;
	--gl-radius-lg: 22px;
	--gl-max-width: 1080px;
	--gl-editor-offset: 210px;
	--gl-editor-min: 120px;   /* minimale editorhoogte op het startscherm */

	--gl-font: "Inter", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gl-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

	/* Bootstrap-variabelen */
	--bs-body-bg: var(--gl-black);
	--bs-body-bg-rgb: 7, 8, 11;
	--bs-body-color: var(--gl-text);
	--bs-body-font-family: var(--gl-font);
	--bs-font-monospace: var(--gl-mono);
	--bs-secondary-color: var(--gl-muted);
	--bs-tertiary-bg: #0e1015;
	--bs-border-color: var(--gl-border);
	--bs-border-radius: var(--gl-radius);
	--bs-border-radius-lg: var(--gl-radius-lg);

	--bs-primary: var(--gl-blue-600);
	--bs-primary-rgb: 37, 99, 235;
	--bs-primary-text-emphasis: var(--gl-blue-300);
	--bs-primary-bg-subtle: rgba(37, 99, 235, .12);
	--bs-primary-border-subtle: rgba(59, 130, 246, .35);

	--bs-link-color: var(--gl-blue-400);
	--bs-link-color-rgb: 96, 165, 250;
	--bs-link-hover-color: var(--gl-blue-300);
	--bs-link-hover-color-rgb: 147, 197, 253;

	--bs-focus-ring-color: var(--gl-blue-glow);
	--bs-emphasis-color: #fff;
	--bs-emphasis-color-rgb: 255, 255, 255;
}

/* ------------------------------------------------------------------ */
/* 2. Basis                                                            */
/* ------------------------------------------------------------------ */
html {
	background: var(--gl-black);
}

body.gl {
	font-family: var(--gl-font);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	letter-spacing: -.005em;
	background:
		radial-gradient(1200px 520px at 50% -180px, rgba(37, 99, 235, .28), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	background-attachment: fixed;
}

::selection {
	background: rgba(59, 130, 246, .45);
	color: #fff;
}

body.gl main > section.container-fluid,
body.gl footer.container-fluid,
body.gl .gl-navbar > .container-fluid {
	max-width: var(--gl-max-width);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ------------------------------------------------------------------ */
/* 3. Navigatie (glas)                                                 */
/* ------------------------------------------------------------------ */
.gl-navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	padding-block: 14px;
	margin-bottom: 28px;
	background: rgba(7, 8, 11, .72);
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid var(--gl-border);
}

.gl-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: 24px;
}

.gl-brand img {
	filter: drop-shadow(0 4px 14px var(--gl-blue-glow));
	transition: transform .25s ease;
}

.gl-brand:hover img {
	transform: translateY(-2px) rotate(-4deg);
}

.gl-wordmark {
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.03em;
	color: #fff;
}

.gl-navbar .navbar-text,
.gl-navbar .form-label {
	color: var(--gl-muted);
	font-size: .9rem;
}

.gl-navbar .navbar-nav {
	row-gap: 10px;
}

/* ------------------------------------------------------------------ */
/* 4. Knoppen                                                          */
/* ------------------------------------------------------------------ */
.btn {
	--bs-btn-border-radius: 999px;
	--bs-btn-padding-x: 1rem;
	--bs-btn-font-weight: 500;
	--bs-btn-focus-box-shadow: 0 0 0 4px var(--gl-blue-glow);
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

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

.btn-primary,
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--gl-blue-600);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--gl-blue-500);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--gl-blue-700);
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-bg: var(--gl-blue-700);
	--bs-btn-disabled-border-color: transparent;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
	box-shadow: 0 8px 24px -8px var(--gl-blue-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-primary:hover,
.btn-success:hover {
	box-shadow: 0 12px 30px -8px rgba(59, 130, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-secondary,
.btn-outline-secondary {
	--bs-btn-color: var(--gl-text);
	--bs-btn-bg: var(--gl-surface-2);
	--bs-btn-border-color: var(--gl-border);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, .1);
	--bs-btn-hover-border-color: var(--gl-border-strong);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: rgba(255, 255, 255, .14);
	--bs-btn-active-border-color: var(--gl-border-strong);
}

/* Wachtwoordveld + oog-knop als één geheel */
.input-group > .btn {
	--bs-btn-border-radius: 0 999px 999px 0;
}

/* ------------------------------------------------------------------ */
/* 5. Formulieren                                                      */
/* ------------------------------------------------------------------ */
.form-control,
.form-select {
	background-color: var(--gl-surface);
	border: 1px solid var(--gl-border);
	border-radius: 999px;
	color: var(--gl-text);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.input-group > .form-control {
	border-radius: 999px 0 0 999px;
}

.form-control::placeholder {
	color: var(--gl-muted);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--gl-surface-2);
	border-color: var(--gl-blue-500);
	box-shadow: 0 0 0 4px var(--gl-blue-glow);
	color: #fff;
}

.form-check-input {
	background-color: var(--gl-surface-2);
	border-color: var(--gl-border-strong);
}

.form-check-input:checked {
	background-color: var(--gl-blue-600);
	border-color: var(--gl-blue-600);
}

.form-check-input:focus {
	border-color: var(--gl-blue-500);
	box-shadow: 0 0 0 4px var(--gl-blue-glow);
}

/* Editor */
textarea#message {
	/* Meeschalen met de schermhoogte. De offset is de ruimte voor navigatie,
	   de knop Verzenden en wat lucht onderaan. svh verspringt niet als op
	   een telefoon het toetsenbord opengaat; vh is de terugval. */
	height: calc(100vh - var(--gl-editor-offset));
	height: calc(100svh - var(--gl-editor-offset));
	min-height: 240px;
	padding: 22px 24px;
	border-radius: var(--gl-radius-lg);
	background: rgba(255, 255, 255, .025);
	border: 1px solid var(--gl-border);
	font-family: var(--gl-mono);
	font-size: .95rem;
	line-height: 1.7;
	resize: vertical;
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .03);
}

textarea#message:focus {
	background: rgba(255, 255, 255, .04);
}

/* ------------------------------------------------------------------ */
/* 7. Weergave van een geopend bericht                                 */
/* ------------------------------------------------------------------ */
#plaintext,
#prettymessage {
	padding: 22px 24px;
	border-radius: var(--gl-radius-lg);
	background: var(--gl-surface);
	border: 1px solid var(--gl-border);
	font-family: var(--gl-mono);
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}

#prettymessage pre {
	background: transparent !important;
	border: 0;
}

#copyShortcutHint {
	color: var(--gl-muted);
}

/* ------------------------------------------------------------------ */
/* 8. Meldingen                                                        */
/* ------------------------------------------------------------------ */
.alert {
	--bs-alert-border-radius: var(--gl-radius);
	border: 1px solid var(--gl-border);
	backdrop-filter: blur(8px);
}

.alert-info,
.alert-success {
	--bs-alert-color: #dbe7ff;
	--bs-alert-bg: rgba(37, 99, 235, .1);
	--bs-alert-border-color: rgba(59, 130, 246, .35);
	--bs-alert-link-color: #fff;
}

.alert-danger {
	--bs-alert-color: #fecaca;
	--bs-alert-bg: rgba(239, 68, 68, .08);
	--bs-alert-border-color: rgba(239, 68, 68, .3);
}

#pastelink a {
	color: #fff;
	font-family: var(--gl-mono);
	word-break: break-all;
}

/* ------------------------------------------------------------------ */
/* 9. Footer                                                           */
/* ------------------------------------------------------------------ */
footer.container-fluid {
	padding-block: 28px;
	margin-top: 48px !important;
	border-top: 1px solid var(--gl-border);
	color: var(--gl-muted);
	font-size: .875rem;
}

.gl-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
}

.gl-footer-brand strong {
	color: #fff;
	font-size: 1rem;
	letter-spacing: -.02em;
}

#aboutbox {
	margin: 0;
	line-height: 1.6;
}

.gl-badge {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid rgba(59, 130, 246, .4);
	background: rgba(37, 99, 235, .12);
	color: var(--gl-blue-300);
	font-family: var(--gl-mono);
	font-size: .72rem;
	letter-spacing: .02em;
	vertical-align: 1px;
}

/* ------------------------------------------------------------------ */
/* 10. Alleen-lezen modus (IP niet toegestaan)                         */
/* ------------------------------------------------------------------ */
@keyframes gl-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.gl-brand img {
		animation: none;
		transition: none;
	}
}

/* Bezoekers zonder aanmaakrecht zien geen editor of aanmaakknoppen */
body.gl-readonly #newbutton,
body.gl-readonly #clonebutton,
body.gl-readonly #expiration,
body.gl-readonly #burnafterreadingoption,
body.gl-readonly #opendiscussionoption,
body.gl-readonly #password,
body.gl-readonly #formatter,
body.gl-readonly #sendbutton,
body.gl-readonly.gl-home #message,
body.gl-readonly.gl-home #gl-tabtoggle,
body.gl-readonly.gl-home #loadingindicator {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 11. Opties die we (nog) niet gebruiken                              */
/* ------------------------------------------------------------------ */
/* Deze elementen moeten in de HTML blijven: privatebin.js roept ze zonder controle aan (bug 2.1.0) */
#opendiscussionoption,
/* Er is maar één formaat (platte tekst) */
#formatter,
/* "Vernietig na lezen" staat altijd aan (afgedwongen in Ghostlink.php) */
#burnafterreadingoption,
/* Tab in de editor is altijd navigatie (zie ghostlink.js) */
#gl-tabtoggle {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 12. Mobiel                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.gl-navbar .navbar-collapse {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--gl-border);
	}

	.navbar-toggler {
		border-color: var(--gl-border);
		border-radius: 12px;
	}

	.navbar-toggler:focus {
		box-shadow: 0 0 0 4px var(--gl-blue-glow);
	}
}

@media (max-width: 575.98px) {
	textarea#message {
		min-height: 200px;
		padding: 16px;
	}
}

/* Startpagina zonder aanmaakrecht: geen leeg hamburgermenu */
body.gl-readonly.gl-home .navbar-toggler,
body.gl-readonly.gl-home #navbar {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 14. Startscherm met editor: alles in één scherm                     */
/* ------------------------------------------------------------------ */
/* De body is minstens schermhoogte (Bootstrap h-100 zou hem vastzetten op
   precies schermhoogte, waardoor de editor bij een laag venster over de
   footer schuift). Main vult de ruimte tussen navigatie en footer, en de
   editor vult wat daarvan overblijft, maar wordt nooit lager dan
   --gl-editor-min. Past dat niet, dan scrollt de pagina. */
body.gl-can-create.gl-home {
	height: auto !important;
	min-height: 100vh;
	min-height: 100svh;
}

body.gl-can-create.gl-home main,
body.gl-can-create.gl-home main > section:has(> article),
body.gl-can-create.gl-home main > section > article,
body.gl-can-create.gl-home main > section > article > p:has(> #message) {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body.gl-can-create.gl-home main > section > article > p:has(> #message) {
	margin-bottom: 0;
}

/* Start op hoogte 0 en groei tot de footer. Met height: auto zou de editor
   beginnen op de hoogte van rows="25" (± 650px) en nooit kleiner worden. */
body.gl-can-create.gl-home textarea#message {
	flex: 1 1 0;
	height: 0;
	min-height: var(--gl-editor-min);
	resize: none;
}

body.gl-can-create.gl-home footer.container-fluid {
	margin-top: 24px !important;
	padding-block: 20px;
}

@media (max-width: 575.98px) {
	:root,
	[data-bs-theme=dark] {
		--gl-editor-min: 100px;
	}
}

/* ------------------------------------------------------------------ */
/* 15. Intro-animatie: de geest verschijnt en verdwijnt                */
/* ------------------------------------------------------------------ */
/* Tijdlijn (totaal ± 4,2 s):
   0,0  gloed + portaalringen
   0,15 geest materialiseert (wazig → scherp, met veer), zweeft en wiegt
   0,95 letters van het woordmerk stijgen op, tagline volgt
   1,15 knipoog, lichtflits over de sleutel
   2,05 alles staat in beeld: leesmoment van ± 1,5 s
   3,5  geest stijgt op en lost op
   3,65 overlay vervaagt, pagina komt tevoorschijn
   De overlay verdwijnt altijd via CSS, ook zonder JavaScript. */
#gl-splash {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--gl-black);
	cursor: pointer;
	animation: gl-sp-out .5s ease 3.65s forwards;
}

html.gl-splash-seen #gl-splash {
	display: none !important;
}

html.gl-splash-skip #gl-splash {
	animation: gl-sp-out .3s ease forwards !important;
}

.gl-splash-glow {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(closest-side at 50% 50%, rgba(37, 99, 235, .45), rgba(37, 99, 235, .12) 45%, transparent 75%);
	animation: gl-sp-glow 1.6s ease-out both;
}

.gl-splash-ring,
.gl-splash-ring::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	height: 220px;
	margin: -150px 0 0 -110px;
	border-radius: 50%;
	border: 2px solid rgba(96, 165, 250, .7);
	box-shadow: 0 0 40px rgba(59, 130, 246, .5), inset 0 0 30px rgba(59, 130, 246, .35);
	opacity: 0;
	animation: gl-sp-ring 1.1s cubic-bezier(.2, .7, .3, 1) .3s both;
}

.gl-splash-ring::after {
	content: "";
	top: 0;
	left: 0;
	margin: -2px;
	animation-delay: .55s;
}

.gl-splash-particles i {
	position: absolute;
	bottom: 38%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gl-blue-300);
	box-shadow: 0 0 12px 2px rgba(96, 165, 250, .8);
	opacity: 0;
	animation: gl-sp-rise 1.7s ease-out both;
}

.gl-splash-particles i:nth-child(1)  { left: 38%; animation-delay: .35s; }
.gl-splash-particles i:nth-child(2)  { left: 61%; animation-delay: .5s; width: 4px; height: 4px; }
.gl-splash-particles i:nth-child(3)  { left: 45%; animation-delay: .7s; width: 3px; height: 3px; }
.gl-splash-particles i:nth-child(4)  { left: 55%; animation-delay: .4s; }
.gl-splash-particles i:nth-child(5)  { left: 33%; animation-delay: .9s; width: 4px; height: 4px; }
.gl-splash-particles i:nth-child(6)  { left: 67%; animation-delay: .8s; width: 3px; height: 3px; }
.gl-splash-particles i:nth-child(7)  { left: 50%; animation-delay: 1.05s; width: 5px; height: 5px; }
.gl-splash-particles i:nth-child(8)  { left: 42%; animation-delay: 1.2s; width: 3px; height: 3px; }
.gl-splash-particles i:nth-child(9)  { left: 58%; animation-delay: 1.3s; width: 4px; height: 4px; }
.gl-splash-particles i:nth-child(10) { left: 48%; animation-delay: .6s; width: 3px; height: 3px; }

.gl-splash-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: gl-sp-vanish .55s cubic-bezier(.5, 0, .75, 0) 3.5s forwards;
}

.gl-splash-float {
	position: relative;
	animation: gl-sp-float 1.1s ease-in-out 1s infinite alternate;
}

.gl-splash-ghost {
	display: block;
	width: clamp(120px, 26vmin, 190px);
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 20px 50px rgba(37, 99, 235, .6));
	animation: gl-sp-ghost-in .9s cubic-bezier(.2, .9, .3, 1.25) .15s both;
}

.gl-splash-ghost .gl-sg-body {
	transform-box: fill-box;
	transform-origin: 50% 15%;
	animation: gl-sp-sway .7s ease-in-out .9s infinite alternate;
}

.gl-splash-ghost .gl-sg-eye {
	transform-box: fill-box;
	transform-origin: center;
	animation: gl-sp-blink .28s ease-in-out 1.15s both;
}

.gl-splash-ghost .gl-sg-shine {
	animation: gl-sp-shine .75s ease-in-out 1.15s both;
}

.gl-splash-shadow {
	width: 60%;
	height: 14px;
	margin: 14px auto 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(37, 99, 235, .55), transparent);
	animation: gl-sp-shadow 1.1s ease-in-out 1s infinite alternate;
}

.gl-splash-word {
	margin-top: 22px;
	font-size: clamp(2rem, 7vmin, 3.2rem);
	font-weight: 800;
	letter-spacing: -.04em;
	color: #fff;
	text-shadow: 0 0 30px rgba(59, 130, 246, .55);
}

.gl-splash-word span {
	display: inline-block;
	opacity: 0;
	animation: gl-sp-letter .55s cubic-bezier(.2, .8, .3, 1.2) both;
}

.gl-splash-word span:nth-child(1)  { animation-delay: .95s; }
.gl-splash-word span:nth-child(2)  { animation-delay: 1s; }
.gl-splash-word span:nth-child(3)  { animation-delay: 1.05s; }
.gl-splash-word span:nth-child(4)  { animation-delay: 1.1s; }
.gl-splash-word span:nth-child(5)  { animation-delay: 1.15s; }
.gl-splash-word span:nth-child(6)  { animation-delay: 1.2s; }
.gl-splash-word span:nth-child(7)  { animation-delay: 1.25s; }
.gl-splash-word span:nth-child(8)  { animation-delay: 1.3s; }
.gl-splash-word span:nth-child(9)  { animation-delay: 1.35s; }
.gl-splash-word span:nth-child(10) { animation-delay: 1.4s; }
.gl-splash-word span:nth-child(11) { animation-delay: 1.45s; }
.gl-splash-word span:nth-child(12) { animation-delay: 1.5s; }

.gl-splash-tag {
	margin-top: 6px;
	color: var(--gl-blue-300);
	font-size: clamp(.9rem, 2.4vmin, 1.05rem);
	letter-spacing: .02em;
	opacity: 0;
	animation: gl-sp-fade .6s ease 1.45s both;
}

@keyframes gl-sp-out {
	to { opacity: 0; visibility: hidden; }
}

@keyframes gl-sp-glow {
	0%   { opacity: 0; transform: scale(.6); }
	60%  { opacity: 1; transform: scale(1.05); }
	100% { opacity: .85; transform: scale(1); }
}

@keyframes gl-sp-ring {
	0%   { opacity: 0; transform: scale(.2); }
	25%  { opacity: 1; }
	100% { opacity: 0; transform: scale(3); }
}

@keyframes gl-sp-rise {
	0%   { opacity: 0; transform: translateY(40px) scale(.6); }
	25%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-220px) scale(1); }
}

@keyframes gl-sp-ghost-in {
	0%   { opacity: 0; transform: translateY(70px) scale(.35) rotate(-8deg); filter: blur(16px) drop-shadow(0 20px 50px rgba(37, 99, 235, 0)); }
	55%  { opacity: 1; filter: blur(0) drop-shadow(0 20px 50px rgba(37, 99, 235, .6)); }
	100% { opacity: 1; transform: none; filter: drop-shadow(0 20px 50px rgba(37, 99, 235, .6)); }
}

@keyframes gl-sp-float {
	to { transform: translateY(-10px); }
}

@keyframes gl-sp-sway {
	from { transform: rotate(-3deg); }
	to   { transform: rotate(3deg); }
}

@keyframes gl-sp-blink {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(.1); }
}

@keyframes gl-sp-shine {
	from { transform: translateX(0); }
	to   { transform: translateX(110px); }
}

@keyframes gl-sp-shadow {
	from { transform: scaleX(1); opacity: 1; }
	to   { transform: scaleX(.8); opacity: .6; }
}

@keyframes gl-sp-letter {
	from { opacity: 0; transform: translateY(22px) scale(.9); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes gl-sp-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@keyframes gl-sp-vanish {
	to { opacity: 0; transform: translateY(-60px) scale(1.12); filter: blur(12px); }
}

/* Minder beweging gevraagd: alleen het logo, kort, dan vervagen */
@media (prefers-reduced-motion: reduce) {
	#gl-splash {
		animation: gl-sp-out .4s ease .6s forwards;
	}

	#gl-splash *,
	#gl-splash *::after {
		animation: none !important;
	}

	.gl-splash-ring,
	.gl-splash-particles {
		display: none;
	}

	.gl-splash-word span,
	.gl-splash-tag {
		opacity: 1;
	}

	.gl-splash-ghost .gl-sg-shine {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* 16. Knop Aanmaken geblokkeerd zolang de editor leeg is              */
/* ------------------------------------------------------------------ */
#sendbutton:disabled {
	opacity: .35;
	filter: saturate(.3);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: auto; /* nodig voor de cursor; een disabled knop klikt niet */
}

/* ------------------------------------------------------------------ */
/* 17. Scherm na het aanmaken (body.gl-created, gezet door ghostlink.js) */
/* ------------------------------------------------------------------ */
/* Rust in beeld: geen navigatieknoppen, statusmeldingen of sneltoetstip.
   De verstuurde tekst blijft verborgen tot je op "Bekijk" klikt. */
body.gl-created .gl-navbar .navbar-collapse,
body.gl-created .gl-navbar .navbar-toggler,
body.gl-created #status,
body.gl-created #remainingtime,
body.gl-created #copyShortcutHint,
body.gl-created:not(.gl-show-content) #placeholder,
body.gl-created:not(.gl-show-content) #plaintext,
body.gl-created:not(.gl-show-content) #prettymessage {
	display: none !important;
}

/* Kaart verticaal gecentreerd tussen navigatie en footer */
body.gl-can-create.gl-home.gl-created main > section.mt-2 {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.gl-can-create.gl-home.gl-created main > section:has(> article),
body.gl-can-create.gl-home.gl-created main > section > article,
body.gl-can-create.gl-home.gl-created main > section > article > p:has(> #message) {
	flex: 0 0 auto;
}

body.gl-created.gl-show-content #plaintext,
body.gl-created.gl-show-content #prettymessage {
	max-width: 640px;
	margin: 0 auto 24px;
	animation: gl-sc-up .35s ease both;
}

.gl-success-card {
	position: relative;
	max-width: 640px;
	margin: 2vh auto 24px;
	padding: 44px 36px 26px;
	text-align: center;
	border-radius: 28px;
	border: 1px solid var(--gl-border);
	background:
		radial-gradient(520px 240px at 50% 0, rgba(37, 99, 235, .24), transparent 70%),
		var(--gl-surface);
	box-shadow: 0 40px 120px -50px rgba(37, 99, 235, .55);
	overflow: hidden;
	animation: gl-sc-in .6s cubic-bezier(.2, .8, .3, 1.1) both;
}

/* Lichtlijn die over de bovenrand glijdt */
.gl-success-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gl-blue-300), transparent);
	animation: gl-sc-edge 3.2s ease-in-out .6s infinite;
}

/* Geest met ringen, vonkjes en vinkje */
.gl-success-visual {
	position: relative;
	width: 128px;
	height: 128px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
}

.gl-success-ghost {
	position: relative;
	z-index: 2;
	width: 88px;
	height: 88px;
	filter: drop-shadow(0 16px 32px var(--gl-blue-glow));
	animation:
		gl-sc-ghost .8s cubic-bezier(.2, .9, .3, 1.3) .1s both,
		gl-float 5s ease-in-out 1s infinite;
}

.gl-success-ring {
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	border: 2px solid rgba(96, 165, 250, .55);
	box-shadow: 0 0 24px rgba(59, 130, 246, .35);
	opacity: 0;
	animation: gl-sc-ring 2.6s ease-out .3s infinite;
}

.gl-success-ring + .gl-success-ring {
	animation-delay: 1.6s;
}

.gl-success-burst i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px;
	border-radius: 50%;
	background: var(--gl-blue-300);
	box-shadow: 0 0 10px 2px rgba(96, 165, 250, .8);
	opacity: 0;
	animation: gl-sc-burst .9s cubic-bezier(.15, .7, .3, 1) .45s both;
}

.gl-success-burst i:nth-child(1) { --gl-a: 0deg; }
.gl-success-burst i:nth-child(2) { --gl-a: 45deg; width: 4px; height: 4px; }
.gl-success-burst i:nth-child(3) { --gl-a: 90deg; }
.gl-success-burst i:nth-child(4) { --gl-a: 135deg; width: 4px; height: 4px; }
.gl-success-burst i:nth-child(5) { --gl-a: 180deg; }
.gl-success-burst i:nth-child(6) { --gl-a: 225deg; width: 4px; height: 4px; }
.gl-success-burst i:nth-child(7) { --gl-a: 270deg; }
.gl-success-burst i:nth-child(8) { --gl-a: 315deg; width: 4px; height: 4px; }

.gl-success-badge {
	position: absolute;
	z-index: 3;
	right: 14px;
	bottom: 16px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: var(--gl-blue-600);
	box-shadow: 0 0 0 4px #0b0d13, 0 8px 20px -4px var(--gl-blue-glow);
	animation: gl-sc-pop .55s cubic-bezier(.2, .9, .3, 1.5) .55s both;
}

.gl-success-title {
	margin: 0 0 8px;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -.035em;
	color: #fff;
	animation: gl-sc-up .5s ease .25s both;
}

.gl-success-text {
	max-width: 440px;
	margin: 0 auto;
	color: var(--gl-muted);
	line-height: 1.6;
	animation: gl-sc-up .5s ease .35s both;
}

/* Linkveld met kopieerknop */
.gl-linkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 8px;
	padding: 7px 7px 7px 18px;
	border-radius: 999px;
	border: 1px solid var(--gl-border-strong);
	background: rgba(0, 0, 0, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
	animation: gl-sc-up .5s ease .45s both;
}

.gl-linkbox:hover {
	border-color: var(--gl-blue-500);
	box-shadow: 0 0 0 4px var(--gl-blue-glow);
}

.gl-linkbox-icon {
	flex-shrink: 0;
	color: var(--gl-blue-400);
}

/* PrivateBin vult #pastelink met "Je document is <a>…</a> (Druk …)".
   We tonen alleen de link zelf, op één regel. Klikken kopieert (ghostlink.js),
   zodat je niet per ongeluk je eigen link opent en vernietigt. */
#pastelink {
	flex: 1;
	min-width: 0;
	font-size: 0;
	text-align: left;
}

#pastelink #pasteurl {
	display: block;
	overflow: hidden;
	font-size: .92rem;
	font-family: var(--gl-mono);
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	word-break: normal;
	pointer-events: none;
}

#pastelink #copyhint {
	display: none;
}

.gl-copy {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .6rem 1.2rem;
	font-weight: 600;
}

.gl-copy .gl-copy-check,
.gl-copy .gl-copy-done,
.gl-copy.gl-copied .gl-copy-icon,
.gl-copy.gl-copied .gl-copy-label {
	display: none;
}

.gl-copy.gl-copied .gl-copy-check,
.gl-copy.gl-copied .gl-copy-done {
	display: inline;
}

.gl-copy.gl-copied {
	animation: gl-sc-bump .4s cubic-bezier(.2, .9, .3, 1.5);
}

.gl-linkbox-hint {
	margin: 0 0 20px;
	color: var(--gl-muted);
	font-size: .8rem;
	animation: gl-sc-up .5s ease .5s both;
}

.gl-linkbox-hint kbd {
	padding: 1px 6px;
	border-radius: 6px;
	border: 1px solid var(--gl-border-strong);
	background: var(--gl-surface-2);
	color: var(--gl-text);
	font-family: var(--gl-font);
	font-size: .75rem;
}

/* Feiten als chips */
.gl-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gl-facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--gl-border);
	background: var(--gl-surface-2);
	color: var(--gl-text);
	font-size: .8rem;
	animation: gl-sc-up .45s ease both;
}

.gl-facts li svg {
	color: var(--gl-blue-400);
}

.gl-facts li.gl-fact-burn svg {
	color: #fb923c;
}

.gl-facts li:nth-child(1) { animation-delay: .55s; }
.gl-facts li:nth-child(2) { animation-delay: .62s; }
.gl-facts li:nth-child(3) { animation-delay: .69s; }
.gl-facts li:nth-child(4) { animation-delay: .76s; }

.gl-pass-yes,
body.gl-has-password .gl-pass-no {
	display: none;
}

body.gl-has-password .gl-pass-yes {
	display: inline;
}

/* Acties */
.gl-success-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--gl-border);
	animation: gl-sc-up .5s ease .8s both;
}

.gl-success-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: .88rem;
	white-space: nowrap;
}

.btn.gl-act-delete {
	--bs-btn-hover-color: #fecaca;
	--bs-btn-hover-bg: rgba(239, 68, 68, .14);
	--bs-btn-hover-border-color: rgba(239, 68, 68, .45);
	--bs-btn-active-color: #fecaca;
	--bs-btn-active-bg: rgba(239, 68, 68, .22);
	--bs-btn-active-border-color: rgba(239, 68, 68, .55);
}

.gl-reveal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	padding: 4px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--gl-muted);
	font-size: .82rem;
	cursor: pointer;
	animation: gl-sc-up .5s ease .9s both;
}

.gl-reveal:hover {
	color: #fff;
}

.gl-reveal .gl-reveal-eyeoff,
.gl-reveal .gl-reveal-hide,
body.gl-show-content .gl-reveal .gl-reveal-eye,
body.gl-show-content .gl-reveal .gl-reveal-show {
	display: none;
}

body.gl-show-content .gl-reveal .gl-reveal-eyeoff,
body.gl-show-content .gl-reveal .gl-reveal-hide {
	display: inline;
}

@media (max-width: 575.98px) {
	.gl-success-card {
		padding: 34px 18px 20px;
		border-radius: 22px;
	}

	.gl-linkbox {
		padding-left: 14px;
	}

	.gl-copy {
		padding: .55rem .9rem;
	}

	.gl-copy .gl-copy-label,
	.gl-copy .gl-copy-done {
		display: none !important;
	}

	.gl-success-actions {
		grid-template-columns: repeat(2, 1fr);
	}
}

@keyframes gl-sc-in {
	from { opacity: 0; transform: translateY(24px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes gl-sc-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes gl-sc-ghost {
	0%   { opacity: 0; transform: translateY(30px) scale(.4); filter: blur(10px) drop-shadow(0 16px 32px rgba(37, 99, 235, 0)); }
	60%  { opacity: 1; filter: blur(0) drop-shadow(0 16px 32px var(--gl-blue-glow)); }
	100% { opacity: 1; transform: none; filter: drop-shadow(0 16px 32px var(--gl-blue-glow)); }
}

@keyframes gl-sc-ring {
	0%   { opacity: 0; transform: scale(.6); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: scale(1.7); }
}

@keyframes gl-sc-burst {
	0%   { opacity: 0; transform: rotate(var(--gl-a)) translateY(0) scale(.4); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--gl-a)) translateY(-72px) scale(1); }
}

@keyframes gl-sc-pop {
	0%   { opacity: 0; transform: scale(0) rotate(-60deg); }
	70%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes gl-sc-bump {
	50% { transform: scale(1.06); }
}

@keyframes gl-sc-edge {
	0%   { left: -40%; }
	60%  { left: 100%; }
	100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.gl-success-card,
	.gl-success-card *,
	.gl-success-card::before,
	body.gl-created #plaintext,
	body.gl-created #prettymessage {
		animation: none !important;
	}

	.gl-success-ring,
	.gl-success-burst {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* 18. Bevestigen voordat de ontvanger een bericht opent               */
/* ------------------------------------------------------------------ */
/* Hergebruikt de bouwstenen van sectie 17 (geest, ringen, chips).
   Het venster sluit alleen via "Bericht openen" of "Later openen":
   static backdrop en geen Esc (in het template), kruisje verborgen. */
body:has(#loadconfirmmodal.show) .modal-backdrop {
	background:
		radial-gradient(900px 500px at 50% 35%, rgba(37, 99, 235, .22), transparent 70%),
		rgba(7, 8, 11, .9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body:has(#loadconfirmmodal.show) .modal-backdrop.show {
	opacity: 1;
}

.gl-confirm .modal-dialog {
	max-width: 540px;
	padding: 0 12px;
}

.gl-confirm .gl-confirm-card {
	position: relative;
	padding: 42px 34px 26px;
	text-align: center;
	border-radius: 28px;
	border: 1px solid var(--gl-border-strong);
	background:
		radial-gradient(520px 240px at 50% 0, rgba(37, 99, 235, .26), transparent 70%),
		#0b0d13;
	box-shadow: 0 50px 140px -40px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
	overflow: hidden;
}

.gl-confirm.show .gl-confirm-card {
	animation: gl-sc-in .6s cubic-bezier(.2, .8, .3, 1.1) both;
}

.gl-confirm .gl-confirm-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gl-blue-300), transparent);
	animation: gl-sc-edge 3.2s ease-in-out .6s infinite;
}

.gl-confirm .btn-close {
	display: none;
}

/* Vlammetje in plaats van vinkje */
.gl-success-badge.gl-badge-fire {
	color: #fff;
	background: linear-gradient(180deg, #fb923c, #ea580c);
	box-shadow: 0 0 0 4px #0b0d13, 0 8px 22px -4px rgba(234, 88, 12, .6);
}

.gl-confirm .gl-success-title {
	font-size: clamp(1.45rem, 3.6vw, 1.95rem);
}

.gl-confirm-facts {
	align-self: center;
	margin-top: 20px;
}

.gl-confirm-open {
	align-self: center; /* .modal-content is een flex-kolom */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 320px;
	margin-top: 28px;
	padding: .85rem 1.6rem;
	font-size: 1.05rem;
	font-weight: 600;
	animation: gl-sc-up .5s ease .8s both, gl-cf-pulse 2.4s ease-in-out 1.6s infinite;
}

.gl-confirm-later {
	align-self: center;
	display: inline-block;
	margin-top: 14px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--gl-muted);
	font-size: .85rem;
	text-decoration: none;
	animation: gl-sc-up .5s ease .9s both;
}

.gl-confirm-later:hover {
	color: #fff;
}

@keyframes gl-cf-pulse {
	0%, 100% { box-shadow: 0 8px 24px -8px var(--gl-blue-glow), 0 0 0 0 rgba(59, 130, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
	50%      { box-shadow: 0 8px 24px -8px var(--gl-blue-glow), 0 0 0 10px rgba(59, 130, 246, 0), inset 0 1px 0 rgba(255, 255, 255, .18); }
}

@media (max-width: 575.98px) {
	.gl-confirm .gl-confirm-card {
		padding: 34px 20px 20px;
		border-radius: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-confirm .gl-confirm-card,
	.gl-confirm .gl-confirm-card *,
	.gl-confirm .gl-confirm-card::before,
	.gl-expire {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 19. Fullscreen: scherm na aanmaken en bevestigen voor ontvanger     */
/* ------------------------------------------------------------------ */
/* Geen navigatie, geen footer, geen kaartrand: de inhoud staat vrij
   gecentreerd in het scherm, met de blauwe gloed erachter. */
body.gl-created .gl-navbar,
body.gl-created footer.container-fluid {
	display: none !important;
}

body.gl-created {
	background:
		radial-gradient(900px 560px at 50% 38%, rgba(37, 99, 235, .26), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	background-attachment: fixed;
}

body.gl-created .gl-success-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 6vh 8px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

body.gl-created .gl-success-card::before {
	display: none;
}

body.gl-created .gl-success-visual {
	transform: scale(1.15);
	margin-bottom: 26px;
}

body.gl-created .gl-success-title {
	font-size: clamp(2rem, 5vw, 2.9rem);
}

body.gl-created .gl-success-text {
	max-width: 500px;
	font-size: 1.05rem;
}

body.gl-created .gl-linkbox {
	max-width: 620px;
	margin-inline: auto;
	background: rgba(0, 0, 0, .45);
}

body.gl-created .gl-success-actions {
	max-width: 620px;
	margin-inline: auto;
	border-top: 0;
	padding-top: 0;
}

/* Bevestigen: modal-fullscreen (template), inhoud gecentreerd */
.gl-confirm .modal-dialog.modal-fullscreen {
	max-width: none;
	padding: 0;
}

.gl-confirm .modal-fullscreen .gl-confirm-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6vh 20px;
	border: 0;
	border-radius: 0;
	background:
		radial-gradient(900px 560px at 50% 38%, rgba(37, 99, 235, .26), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	box-shadow: none;
}

.gl-confirm .modal-fullscreen .gl-confirm-card::before {
	display: none;
}

.gl-confirm.show .modal-fullscreen .gl-confirm-card {
	animation: gl-cf-fade .4s ease both;
}

.gl-confirm .modal-fullscreen .gl-success-visual {
	transform: scale(1.15);
	margin-bottom: 26px;
}

.gl-confirm .modal-fullscreen .gl-success-title {
	font-size: clamp(1.9rem, 5vw, 2.7rem);
}

.gl-confirm .modal-fullscreen .gl-success-text {
	max-width: 500px;
	font-size: 1.05rem;
}

@keyframes gl-cf-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* 20. Aanmaakscherm in dezelfde stijl: fullscreen, gecentreerd        */
/* ------------------------------------------------------------------ */
/* Geldt voor wie mag aanmaken, op de startpagina, zolang er nog geen
   link gemaakt is. Verlooptijd, wachtwoord en de knop staan (template)
   in #gl-createbar onder de editor in plaats van in de navigatie. */
#gl-create-hero,
#editorTabs {
	display: none !important;
}

body.gl-can-create.gl-home:not(.gl-created):has(#message:not(.hidden)) #gl-create-hero {
	display: block !important;
}

body.gl-can-create.gl-home:not(.gl-created) .gl-navbar,
body.gl-can-create.gl-home:not(.gl-created) footer.container-fluid {
	display: none !important;
}

body.gl-can-create.gl-home:not(.gl-created) {
	background:
		radial-gradient(900px 520px at 50% 0, rgba(37, 99, 235, .26), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	background-attachment: fixed;
}

body.gl-can-create.gl-home:not(.gl-created) main {
	padding-block: 4vh 3vh;
}

body.gl-can-create.gl-home:not(.gl-created) main > section.container-fluid {
	max-width: 780px;
}

.gl-create-hero {
	margin-bottom: 22px;
	text-align: center;
}

.gl-create-hero .gl-success-visual {
	width: 104px;
	height: 104px;
	margin-bottom: 8px;
}

.gl-create-hero .gl-success-ghost {
	width: 72px;
	height: 72px;
}

.gl-create-hero .gl-success-ring {
	inset: 10px;
}

.gl-create-hero .gl-success-title {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
}

.gl-create-hero .gl-success-text {
	max-width: 480px;
	font-size: 1.02rem;
}

/* Editor als groot glazen vlak */
body.gl-can-create textarea#message {
	background: rgba(0, 0, 0, .35);
	border-color: var(--gl-border-strong);
	animation: gl-sc-up .5s ease .45s both;
}

body.gl-can-create textarea#message:focus {
	background: rgba(0, 0, 0, .45);
	border-color: var(--gl-blue-500);
	box-shadow: 0 0 0 4px var(--gl-blue-glow), 0 30px 80px -40px rgba(37, 99, 235, .5);
}

/* Balk met verlooptijd, wachtwoord en knop */
.gl-createbar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-top: 14px;
	animation: gl-sc-up .5s ease .55s both;
}

.gl-createbar:not(:has(> :not(.hidden))),
body.gl-readonly .gl-createbar,
body.gl-readonly .gl-createhint,
.gl-createbar:has(> #sendbutton.hidden) + .gl-createhint {
	display: none;
}

.gl-field {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 6px 0 16px;
	border-radius: 999px;
	border: 1px solid var(--gl-border-strong);
	background: rgba(0, 0, 0, .35);
	color: var(--gl-muted);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.gl-field:focus-within {
	border-color: var(--gl-blue-500);
	box-shadow: 0 0 0 4px var(--gl-blue-glow);
}

.gl-field > svg,
.gl-field .gl-field-icon {
	flex-shrink: 0;
	color: var(--gl-blue-400);
}

.gl-field label {
	margin: 0;
	font-size: .85rem;
	white-space: nowrap;
}

.gl-field .form-select {
	width: auto;
	height: 100%;
	padding-left: 4px;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	font-weight: 500;
	cursor: pointer;
}

.gl-field .form-select:focus {
	box-shadow: none;
}

.gl-field .form-select option {
	background: #0e1015;
	color: #fff;
}

.gl-field-password {
	flex: 1 1 220px;
	min-width: 0;
	padding-right: 4px;
}

.gl-field-password .input-group {
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	height: 100%;
}

.gl-field-password .input-group > .form-control {
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
}

.gl-field-password .input-group > .btn.toggle-password {
	--bs-btn-border-radius: 999px;
	flex-shrink: 0;
	padding: 8px 12px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--gl-muted);
}

.gl-field-password .input-group > .btn.toggle-password:hover {
	color: #fff;
	background: var(--gl-surface-2);
}

#sendbutton.gl-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	margin-left: auto;
	padding: 0 1.7rem;
	font-size: 1rem;
	font-weight: 600;
}

#sendbutton.gl-send.hidden {
	display: none;
}

.gl-createhint {
	margin: 12px 0 0;
	text-align: center;
	color: var(--gl-muted);
	font-size: .8rem;
	animation: gl-sc-up .5s ease .65s both;
}

.gl-createhint svg {
	color: #fb923c;
	vertical-align: -1px;
}

.gl-createhint kbd {
	padding: 1px 6px;
	border-radius: 6px;
	border: 1px solid var(--gl-border-strong);
	background: var(--gl-surface-2);
	color: var(--gl-text);
	font-family: var(--gl-font);
	font-size: .75rem;
}

@media (max-width: 575.98px) {
	.gl-field,
	#sendbutton.gl-send {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.gl-field .form-select {
		flex: 1;
	}

	.gl-create-hero .gl-success-visual {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-create-hero *,
	.gl-createbar,
	.gl-createhint,
	body.gl-can-create textarea#message {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 21. Resterende geldigheid op het bevestigingsscherm                 */
/* ------------------------------------------------------------------ */
/* Badge tussen titel en tekst; ghostlink.js telt live af */
.gl-expire {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 4px auto 16px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--bs-primary-border-subtle);
	background: var(--bs-primary-bg-subtle);
	color: #dbe7ff;
	font-size: .9rem;
	font-weight: 500;
	animation: gl-sc-up .5s ease .3s both;
}

.gl-expire svg {
	flex-shrink: 0;
	color: var(--gl-blue-400);
}

.gl-expire .gl-expire-at {
	color: var(--gl-blue-300);
	font-weight: 400;
}

.gl-expire.gl-expired {
	border-color: rgba(239, 68, 68, .45);
	background: rgba(239, 68, 68, .1);
	color: #fecaca;
}

.gl-expire.gl-expired svg {
	color: #f87171;
}

.gl-expire.gl-expired .gl-expire-at {
	display: none;
}

@media (max-width: 575.98px) {
	.gl-expire {
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 18px;
		text-align: center;
	}
}

.gl-confirm-open:disabled {
	opacity: .4;
	animation: none;
	cursor: not-allowed;
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* 22. Ontvangerspagina's (body.gl-view): bericht geopend of weg       */
/* ------------------------------------------------------------------ */
/* Toestanden worden gezet door ghostlink.js (sectie 6). Zolang er geen
   toestand is, blijft alles onzichtbaar: alleen de blauwe achtergrond.
   Zo flitst het raamwerk of de editor nooit in beeld. Bevestigen en
   wachtwoord zijn modals buiten <main> en blijven gewoon zichtbaar. */
body.gl-view {
	background:
		radial-gradient(900px 560px at 50% 30%, rgba(37, 99, 235, .24), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	background-attachment: fixed;
}

body.gl-view:not(.gl-opened):not(.gl-gone):not(.gl-cloning):not(.gl-statusonly):not(.gl-deleted) .gl-navbar,
body.gl-view:not(.gl-opened):not(.gl-gone):not(.gl-cloning):not(.gl-statusonly):not(.gl-deleted) main,
body.gl-view:not(.gl-opened):not(.gl-gone):not(.gl-cloning):not(.gl-statusonly):not(.gl-deleted) footer.container-fluid {
	visibility: hidden;
}

/* Standaard verborgen; alleen in de bijbehorende toestand zichtbaar */
#gl-open-hero,
#gl-gone-hero,
#gl-gone-foot,
#gl-open-extra {
	display: none;
}

body.gl-gone #gl-gone-foot {
	display: block;
	text-align: center;
}

body.gl-opened #gl-open-hero,
body.gl-gone #gl-gone-hero {
	display: block;
}

body.gl-opened #gl-open-extra {
	display: flex;
}

/* Fullscreen en verticaal gecentreerd */
body.gl-opened .gl-navbar,
body.gl-opened footer.container-fluid,
body.gl-gone .gl-navbar,
body.gl-gone footer.container-fluid {
	display: none !important;
}

body.gl-opened,
body.gl-gone {
	height: auto !important;
	min-height: 100vh;
	min-height: 100svh;
}

body.gl-opened main,
body.gl-gone main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 6vh;
}

body.gl-opened main > section.container-fluid,
body.gl-gone main > section.container-fluid {
	max-width: 780px;
}

.gl-view-hero {
	margin-bottom: 26px;
	text-align: center;
}

.gl-view-hero .gl-success-title {
	font-size: clamp(1.9rem, 5vw, 2.7rem);
}

.gl-view-hero .gl-success-text {
	max-width: 500px;
	font-size: 1.02rem;
}

/* Geopend: geen losse meldingen, het hero-blok vertelt het al */
body.gl-opened #remainingtime,
body.gl-opened #status,
body.gl-opened #copyShortcutHintText {
	display: none !important;
}

/* Kop en bericht vormen samen één glazen paneel */
body.gl-opened #copyShortcutHint {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 10px 10px 10px 22px;
	border: 1px solid var(--gl-border-strong);
	border-bottom-color: var(--gl-border);
	border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0;
	background: rgba(0, 0, 0, .45);
	animation: gl-sc-up .5s ease .35s both;
}

body.gl-opened #copyShortcutHint::before {
	content: "Inhoud";
	color: var(--gl-muted);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.gl-opened #copyShortcutHintBtn {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--gl-blue-600);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--gl-blue-500);
	--bs-btn-hover-border-color: transparent;
	padding: .45rem 1.1rem;
	font-weight: 600;
	box-shadow: 0 8px 24px -8px var(--gl-blue-glow);
}

body.gl-opened #copyShortcutHintBtn.gl-copied {
	animation: gl-sc-bump .4s cubic-bezier(.2, .9, .3, 1.5);
}

body.gl-opened #prettymessage,
body.gl-opened #plaintext {
	margin: 0;
	padding: 24px 26px;
	border: 1px solid var(--gl-border-strong);
	border-top: 0;
	border-radius: 0 0 var(--gl-radius-lg) var(--gl-radius-lg);
	background: rgba(0, 0, 0, .35);
	box-shadow: 0 40px 100px -50px rgba(37, 99, 235, .5);
	animation: gl-sc-up .5s ease .4s both;
}

body.gl-opened #prettymessage #prettyprint {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}

body.gl-opened #prettymessage #prettyprint li {
	list-style: none;
	background: none;
}

/* Kopieerkop ontbreekt (bijv. zonder klembord-API): paneel heel rond */
body.gl-opened #copyShortcutHint.hidden + #prettymessage {
	border-top: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius-lg);
}

.gl-open-extra {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	animation: gl-sc-up .5s ease .55s both;
}

.gl-open-extra .gl-confirm-later {
	margin-top: 0;
	animation: none;
}

.gl-open-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Link werkt niet: rustige geest zonder ringen, foutdetail als kleine regel */
.gl-gone .gl-success-ghost {
	filter: grayscale(.7) drop-shadow(0 16px 32px rgba(37, 99, 235, .25));
	opacity: .75;
}

.gl-success-badge.gl-badge-gone {
	background: #3f4352;
	box-shadow: 0 0 0 4px var(--gl-black);
}


body.gl-gone main > section.mt-2 > :not(#errormessage),
body.gl-gone main > section:has(> article) {
	display: none !important;
}

body.gl-gone #errormessage {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	border-color: var(--gl-border);
	background: var(--gl-surface);
	color: var(--gl-muted);
	font-size: .8rem;
	text-align: center;
	animation: gl-sc-up .5s ease .5s both;
}

/* Het detail komt onder het hero-blok, de link naar de startpagina eronder */
body.gl-gone main {
	gap: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gl-view-hero *,
	.gl-open-extra,
	body.gl-opened #copyShortcutHint,
	body.gl-opened #prettymessage,
	body.gl-opened #plaintext,
	body.gl-gone #errormessage {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 23. Startpagina voor bezoekers zonder aanmaakrecht                  */
/* ------------------------------------------------------------------ */
/* Zelfde stijl als de andere schermen: fullscreen, geen kaartrand. */
body.gl-readonly.gl-home .gl-navbar,
body.gl-readonly.gl-home footer.container-fluid {
	display: none !important;
}

body.gl-readonly.gl-home {
	height: auto !important;
	min-height: 100vh;
	min-height: 100svh;
	background:
		radial-gradient(900px 560px at 50% 38%, rgba(37, 99, 235, .26), transparent 70%),
		radial-gradient(700px 400px at 100% 0, rgba(29, 78, 216, .12), transparent 70%),
		var(--gl-black);
	background-attachment: fixed;
}

body.gl-readonly.gl-home main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 6vh;
}

.gl-readonly-hero {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.gl-readonly-hero .gl-success-visual {
	transform: scale(1.15);
	margin-bottom: 26px;
}

.gl-readonly-hero .gl-success-title {
	font-size: clamp(2rem, 5vw, 2.9rem);
}

.gl-readonly-hero .gl-success-text {
	max-width: 500px;
	font-size: 1.05rem;
}

.gl-readonly-facts {
	margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.gl-readonly-hero * {
		animation: none !important;
	}
}

.gl-readonly-hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 26px 0 0;
	color: var(--gl-muted);
	font-size: .88rem;
	animation: gl-sc-up .5s ease .85s both;
}

.gl-readonly-hint svg {
	flex-shrink: 0;
	color: var(--gl-blue-400);
}

/* ------------------------------------------------------------------ */
/* 24. Wachtwoord vragen (#passwordmodal)                              */
/* ------------------------------------------------------------------ */
/* Zelfde fullscreen-opzet als het bevestigingsscherm (klasse gl-confirm). */
body:has(#passwordmodal.show) .modal-backdrop {
	background: var(--gl-black);
}

body:has(#passwordmodal.show) .modal-backdrop.show {
	opacity: 1;
}

.gl-password-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 420px;
	margin: 26px auto 0;
	animation: gl-sc-up .5s ease .5s both;
}

.gl-password-form .gl-field-password {
	flex: none;
	width: 100%;
	height: 54px;
}

.gl-password-form .gl-confirm-open {
	margin-top: 16px;
	animation: none;
}

.gl-password-error {
	display: none;
	align-self: center;
	align-items: center;
	gap: 8px;
	margin: 4px auto 14px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid rgba(239, 68, 68, .45);
	background: rgba(239, 68, 68, .1);
	color: #fecaca;
	font-size: .9rem;
	font-weight: 500;
}

.gl-password-error svg {
	color: #f87171;
}

body.gl-pw-wrong .gl-password-error {
	display: inline-flex;
	animation: gl-pw-shake .45s ease;
}

body.gl-pw-wrong .gl-password-form .gl-field-password {
	border-color: rgba(239, 68, 68, .55);
}

@keyframes gl-pw-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-8px); }
	40%      { transform: translateX(7px); }
	60%      { transform: translateX(-5px); }
	80%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.gl-password-form,
	body.gl-pw-wrong .gl-password-error {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 15b. Eindeloze intro voor bezoekers zonder aanmaakrecht (loop)      */
/* ------------------------------------------------------------------ */
/* De intro speelt één keer op en blijft dan staan: de overlay vervaagt
   niet en de geest lost niet op. Ringen, vonkjes, gloed en lichtflits
   spelen één keer. Alleen de geest blijft bewegen: zweven en wiegen
   (liepen al door) en af en toe knipperen. */
html[data-gl-splash="loop"] #gl-splash {
	animation: none !important;
	cursor: default;
}

html[data-gl-splash="loop"] body {
	overflow: hidden;
}

html[data-gl-splash="loop"] .gl-splash-stage {
	animation: none;
}

html[data-gl-splash="loop"] .gl-splash-ghost .gl-sg-eye {
	animation: gl-spl-blink 5s ease-in-out 1.15s infinite;
}

/* Knipoog aan het begin van elke ronde van 5 s */
@keyframes gl-spl-blink {
	0%, 6%, 100% { transform: scaleY(1); }
	3%           { transform: scaleY(.1); }
}

@media (prefers-reduced-motion: reduce) {
	html[data-gl-splash="loop"] #gl-splash *,
	html[data-gl-splash="loop"] #gl-splash *::after {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 25. Actietegels op het scherm na aanmaken                           */
/* ------------------------------------------------------------------ */
.gl-success-actions .btn.gl-tile {
	--bs-btn-bg: rgba(255, 255, 255, .04);
	--bs-btn-border-color: var(--gl-border);
	--bs-btn-hover-bg: rgba(59, 130, 246, .12);
	--bs-btn-hover-border-color: rgba(59, 130, 246, .45);
	--bs-btn-hover-color: #fff;
	--bs-btn-border-radius: 18px;
	flex-direction: column;
	gap: 8px;
	min-height: 86px;
	padding: 14px 10px;
	font-size: .85rem;
	font-weight: 500;
	color: var(--gl-text);
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gl-success-actions .btn.gl-tile svg {
	width: 22px;
	height: 22px;
	color: var(--gl-blue-400);
	transition: transform .2s ease, color .2s ease;
}

.gl-success-actions .btn.gl-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -18px rgba(37, 99, 235, .7);
}

.gl-success-actions .btn.gl-tile:hover svg {
	transform: scale(1.1);
	color: var(--gl-blue-300);
}

.gl-success-actions .btn.gl-tile.gl-act-delete:hover {
	box-shadow: 0 16px 34px -18px rgba(239, 68, 68, .6);
}

.gl-success-actions .btn.gl-tile.gl-act-delete svg {
	color: #f87171;
}

.gl-success-actions .btn.gl-tile.gl-act-delete:hover svg {
	color: #fca5a5;
}

/* ------------------------------------------------------------------ */
/* 26. Vensters: QR-code, e-mail en wissen (klasse gl-modal)           */
/* ------------------------------------------------------------------ */
body:has(.gl-modal.show) .modal-backdrop {
	background: rgba(7, 8, 11, .7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

body:has(.gl-modal.show) .modal-backdrop.show {
	opacity: 1;
}

.gl-modal .modal-dialog {
	max-width: 440px;
	padding: 0 12px;
}

.gl-modal .modal-content {
	position: relative;
	align-items: center;
	padding: 36px 30px 26px;
	text-align: center;
	border-radius: 28px;
	border: 1px solid var(--gl-border-strong);
	background:
		radial-gradient(420px 200px at 50% 0, rgba(37, 99, 235, .24), transparent 70%),
		#0b0d13;
	box-shadow: 0 50px 140px -40px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.gl-modal.show .modal-content {
	animation: gl-sc-in .45s cubic-bezier(.2, .8, .3, 1.1) both;
}

.gl-modal .btn-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--gl-surface-2);
	background-size: 10px;
	opacity: .7;
}

.gl-modal .btn-close:hover {
	opacity: 1;
	background-color: rgba(255, 255, 255, .12);
}

.gl-modal-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 18px;
	color: var(--gl-blue-300);
	background: rgba(37, 99, 235, .14);
	border: 1px solid rgba(59, 130, 246, .35);
	box-shadow: 0 12px 30px -10px var(--gl-blue-glow);
}

.gl-modal-icon.gl-modal-icon-danger {
	color: #fca5a5;
	background: rgba(239, 68, 68, .12);
	border-color: rgba(239, 68, 68, .4);
	box-shadow: 0 12px 30px -10px rgba(239, 68, 68, .45);
}

.gl-modal-title {
	margin: 0 0 8px;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.gl-modal-text {
	max-width: 340px;
	margin: 0 auto;
	color: var(--gl-muted);
	font-size: .92rem;
	line-height: 1.6;
}

.gl-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 300px;
	margin-top: 24px;
}

.gl-modal .gl-modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: .75rem 1.2rem;
	font-weight: 600;
}

.gl-modal > .modal-dialog > .modal-content > .gl-modal-btn {
	max-width: 300px;
	margin-top: 22px;
}

.gl-modal .btn-danger {
	--bs-btn-color: #fff;
	--bs-btn-bg: #dc2626;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #ef4444;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-bg: #b91c1c;
	box-shadow: 0 8px 24px -8px rgba(239, 68, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* QR-code op een witte kaart met gloed */
.gl-qr-frame {
	margin-top: 22px;
	padding: 16px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px -20px rgba(59, 130, 246, .7);
	line-height: 0;
}

.gl-qr-frame #qrcode-display img,
.gl-qr-frame #qrcode-display canvas {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	image-rendering: pixelated;
}

/* ------------------------------------------------------------------ */
/* 27. Pagina na wissen (?pasteid=…&deletetoken=…)                     */
/* ------------------------------------------------------------------ */
#gl-deleted-hero {
	display: none;
}

body.gl-deleted #gl-deleted-hero {
	display: block;
}

body.gl-deleted .gl-navbar,
body.gl-deleted footer.container-fluid,
body.gl-deleted #gl-open-hero,
body.gl-deleted #gl-gone-hero,
body.gl-deleted #gl-gone-foot,
body.gl-deleted main > section.mt-2,
body.gl-deleted main > section:has(> article) {
	display: none !important;
}

body.gl-deleted {
	height: auto !important;
	min-height: 100vh;
	min-height: 100svh;
}

body.gl-deleted main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 6vh;
}

body.gl-deleted #gl-deleted-hero .gl-success-ghost {
	filter: grayscale(.6) drop-shadow(0 16px 32px rgba(37, 99, 235, .25));
	opacity: .8;
}

body.gl-deleted #gl-deleted-hero .gl-success-badge {
	background: #3f4352;
	box-shadow: 0 0 0 4px var(--gl-black);
}

.gl-deleted-new {
	margin-top: 26px;
}

@media (max-width: 575.98px) {
	.gl-modal .modal-content {
		padding: 32px 20px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-modal.show .modal-content,
	.gl-success-actions .btn.gl-tile,
	.gl-success-actions .btn.gl-tile svg {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 28. Teller van gemaakte links                                       */
/* ------------------------------------------------------------------ */
.gl-stats {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 14px 0 0;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid var(--gl-border);
	background: var(--gl-surface);
	color: var(--gl-muted);
	font-size: .8rem;
	animation: gl-sc-up .5s ease .4s both;
}

.gl-stats svg {
	color: var(--gl-blue-400);
}

.gl-stats strong {
	color: #fff;
	font-weight: 600;
}

.gl-stats-sep {
	opacity: .5;
}

.gl-facts li.gl-fact-count {
	border-color: var(--bs-primary-border-subtle);
	background: var(--bs-primary-bg-subtle);
	color: #dbe7ff;
	font-family: var(--gl-mono);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.gl-stats {
		animation: none !important;
	}
}

/* Nog geen links: badge pas tonen na de eerste */
.gl-stats[data-total="0"] {
	display: none;
}