Nevermind, this would have been better before there was an individual css file for each thing

app/src/privacypin.css

···
-.container-sl {
-	display: flex;
-	justify-content: space-between; /* This will align the elements on opposite sides of the container */
-}
-
-.element-al,
-.element-ar {
-	flex: 1; /* Make the elements take up equal width */
-}
-
-.element-al {
-	text-align: left;
-}
-
-.element-ar {
-	text-align: right;
-}
-
-body {
-	font-family: sans-serif;
-	background: #f9fafb;
-	margin: 0;
-	display: flex;
-	justify-content: center;
-}
-
-.app {
-	width: 100%;
-	background: #f9fafb;
-}
-
-.svg-icon {
-	width: 25px;
-	height: 25px;
-	margin: auto;
-}
-
-header {
-	background: #fff;
-	border-bottom: 1px solid #e5e7eb;
-	padding: 0.75rem 1rem;
-	display: flex;
-	justify-content: space-between;
-}
-
-header h1 {
-	font-size: 1rem;
-	margin: 0;
-	display: flex;
-	align-items: center;
-}
-
-header .icon-btn {
-	border: none;
-	background: none;
-	cursor: pointer;
-	padding: 0.4rem;
-}
-
-.status {
-	background: #fff;
-	border-bottom: 1px solid #f3f4f6;
-	padding: 0.75rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	font-size: 0.9rem;
-}
-
-.content {
-	flex: 1;
-	overflow-y: auto;
-	padding: 1rem;
-}
-
-.friends-header {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 1rem;
-}
-
-.friend-card {
-	background: #fff;
-	border: 1px solid #e5e7eb;
-	border-radius: 8px;
-	padding: 1rem;
-	margin-bottom: 0.75rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.friend-actions {
-	display: flex;
-	align-items: center;
-	gap: 0.1rem;
-}
-
-.friend-actions .view-btn {
-	cursor: pointer;
-	border-radius: 6px;
-	border: 1px solid #d1d5db;
-	background: #fff;
-	padding: 0.3rem 0.5rem;
-	font-size: 0.8rem;
-}
-
-.friend-actions .view-btn:hover {
-	background: #f3f4f6;
-}
-
-.menu-icon {
-	width: 16px;
-	height: 16px;
-	margin: 0;
-}
-
-.friend-actions {
-	cursor: pointer;
-	font-size: 1.2rem;
-	color: #6b7280;
-	padding: 0 0.3rem;
-	user-select: none;
-}
-
-.friend-actions {
-	color: #111827;
-}
-
-.empty-state {
-	text-align: center;
-	padding: 3rem 1rem;
-	color: #6b7280;
-}
-
-.empty-state button {
-	margin-top: 0.75rem;
-	padding: 0.5rem 1rem;
-	border: none;
-	border-radius: 6px;
-	background: #3b82f6;
-	color: white;
-	cursor: pointer;
-}
-
-.friend-actions button img {
-	width: 16px;
-	height: 16px;
-	vertical-align: middle;
-	margin-right: 4px;
-}
-
-body {
-	font-family: system-ui, sans-serif;
-	background: #f9fafb;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-	margin: 0;
-}
-
-.card {
-	max-width: 90%;
-	background: white;
-	border: 1px solid #d1d5db;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-sizing: border-box;
-}
-
-.header {
-	text-align: center;
-	margin-bottom: 1.5rem;
-}
-
-.icon-circle {
-	width: 64px;
-	height: 64px;
-	background: #dbeafe;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 auto 1rem;
-}
-
-.icon-circle img {
-	width: 32px;
-	height: 32px;
-}
-
-h1 {
-	font-size: 1.5rem;
-}
-
-p {
-	font-size: 0.9rem;
-	color: #6b7280;
-}
-
-.actions {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-label {
-	display: block;
-	font-size: 0.85rem;
-	font-weight: 600;
-	margin-bottom: 0.25rem;
-}
-
-input {
-	width: 100%;
-	padding: 0.5rem 0.75rem;
-	border: 1px solid #d1d5db;
-	border-radius: 4px;
-	font-size: 0.95rem;
-	box-sizing: border-box;
-}
-
-input:focus {
-	outline: none;
-	border-color: #2563eb;
-}
-
-button {
-	width: 100%;
-	padding: 0.6rem;
-	font-size: 0.95rem;
-	border-radius: 4px;
-	cursor: pointer;
-	/*transition: background 0.2s ease;*/
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.btn-primary {
-	background: #2563eb;
-	color: white;
-	border: none;
-}
-
-.btn-primary:hover {
-	background: #1d4ed8;
-}
-
-.btn-secondary {
-	background: white;
-	gap: 0.5rem;
-	border: 1px solid #d1d5db;
-}
-
-.btn-secondary:hover {
-	background: #f3f4f6;
-}
-
-.btn-secondary img {
-	width: 16px;
-	height: 16px;
-}
-
-.hint {
-	font-size: 0.75rem;
-}
-
-body {
-	font-family: system-ui, sans-serif;
-	background: #f9fafb;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100vh;
-	margin: 0;
-}
-
-.card {
-	max-width: 90%;
-	background: white;
-	border: 1px solid #d1d5db;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-sizing: border-box;
-}
-
-.header {
-	text-align: center;
-	margin-bottom: 1.5rem;
-}
-
-.icon-circle {
-	width: 64px;
-	height: 64px;
-	background: #dbeafe;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 auto 1rem;
-}
-
-.icon-circle img {
-	width: 48px;
-	height: 48px;
-}
-
-h1 {
-	font-size: 1.5rem;
-}
-
-p {
-	font-size: 0.9rem;
-	color: #6b7280;
-}
-
-.actions {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-label {
-	display: block;
-	font-size: 0.85rem;
-	font-weight: 600;
-	margin-bottom: 0.25rem;
-}
-
-input {
-	width: 100%;
-	padding: 0.5rem 0.75rem;
-	border: 1px solid #d1d5db;
-	border-radius: 4px;
-	font-size: 0.95rem;
-	box-sizing: border-box;
-}
-
-input:focus {
-	outline: none;
-	border-color: #2563eb;
-}
-
-button {
-	width: 100%;
-	padding: 0.6rem;
-	font-size: 0.95rem;
-	border-radius: 4px;
-	cursor: pointer;
-	/*transition: background 0.2s ease;*/
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.btn-primary {
-	background: #2563eb;
-	color: white;
-	border: none;
-}
-
-.btn-primary:hover {
-	background: #1d4ed8;
-}
-
-.btn-qr {
-	background: white;
-	gap: 0.5rem;
-	border: 1px solid #d1d5db;
-}
-
-.btn-qr:hover {
-	background: #f3f4f6;
-}
-
-.btn-qr img {
-	width: 20px;
-	height: 16px;
-}
-
-.hint {
-	font-size: 0.75rem;
-}