html[dir="rtl"] body { font-family: Cairo, "Plus Jakarta Sans", system-ui, sans-serif; }
html[dir="ltr"] body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

@media (max-width: 1023px) {
	html[dir="ltr"] #bp-sidebar { transform: translateX(-100%); }
	html[dir="rtl"] #bp-sidebar { transform: translateX(100%); }
	body.bp-nav-open #bp-scrim { display: block; }
	body.bp-nav-open #bp-sidebar { transform: translateX(0); box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25); }
}

button.bg-slate-900:hover,
a.bg-slate-900:hover {
	background-color: #1e293b;
	color: #ffffff;
}

/* Keep header menus inside the phone viewport */
@media (max-width: 767px) {
	header.sticky {
		overflow: visible;
	}
	.pn-notes-panel,
	.pn-role-panel {
		position: fixed !important;
		top: 4.35rem;
		inset-inline: 0.75rem !important;
		width: auto !important;
		max-width: none !important;
		margin-top: 0 !important;
		max-height: min(70vh, 28rem);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		z-index: 60;
	}
	.pn-notes-panel.hidden,
	.pn-role-panel.hidden {
		display: none !important;
	}
	.pn-notes-panel > .max-h-80,
	.pn-notes-panel > div.max-h-80 {
		max-height: min(52vh, 20rem);
		overflow-y: auto;
	}
}

body.bp-focus [data-bp-focus-hide],
body.bp-focus .bp-nav-badge { display: none !important; }
body.bp-focus #bp-main { max-width: 56rem; }

.bp-nav-flyout-title { display: none; }
.bp-nav-panel-leaf { display: none; }

@media (min-width: 1024px) {
	body.bp-collapsed #bp-sidebar { width: 5rem; overflow: visible; }
	body.bp-collapsed #bp-sidebar nav { overflow: visible; }
	body.bp-collapsed .bp-brand-text,
	body.bp-collapsed .bp-brand-glow,
	body.bp-collapsed .bp-brand-fun,
	body.bp-collapsed .bp-nav-section,
	body.bp-collapsed .bp-nav-hint,
	body.bp-collapsed .bp-nav-item > .bp-nav-group .bp-nav-text,
	body.bp-collapsed .bp-nav-item > .bp-nav-group .bp-nav-chevron,
	body.bp-collapsed .bp-nav-item > .bp-nav-link .bp-nav-text,
	body.bp-collapsed .bp-nav-item > .bp-nav-link .bp-nav-badge { display: none !important; }
	body.bp-collapsed #bp-sidebar nav .bp-nav-item > .bp-nav-link,
	body.bp-collapsed #bp-sidebar nav .bp-nav-group { justify-content: center; padding-inline: 0.5rem; }
	body.bp-collapsed .bp-nav-panel {
		display: none;
		position: fixed;
		z-index: 70;
		width: 16.5rem;
		padding: 0.5rem;
		background: #ffffff;
		border: 1px solid #e2e8f0;
		border-radius: 0.9rem;
		box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
	}
	body.bp-collapsed .bp-nav-panel::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 14px;
	}
	html[dir="ltr"] body.bp-collapsed .bp-nav-panel::before { left: -14px; }
	html[dir="rtl"] body.bp-collapsed .bp-nav-panel::before { right: -14px; }
	body.bp-collapsed .bp-nav-item.is-flyout-open .bp-nav-panel { display: block; }
	body.bp-collapsed .bp-nav-flyout-title {
		display: block;
		padding: 0.4rem 0.65rem 0.55rem;
		margin-bottom: 0.25rem;
		font-size: 0.72rem;
		font-weight: 700;
		color: #64748b;
		border-bottom: 1px solid #e2e8f0;
	}
	html[dir="ltr"] body.bp-collapsed .bp-nav-flyout-title {
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}
	body.bp-collapsed .bp-nav-panel-leaf {
		width: auto;
		min-width: 10rem;
		max-width: 16rem;
		padding: 0.45rem 0.55rem;
	}
	body.bp-collapsed .bp-nav-item.is-flyout-open .bp-nav-panel-leaf {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	body.bp-collapsed .bp-nav-panel-leaf .bp-nav-flyout-title {
		padding: 0;
		margin: 0;
		border: 0;
		text-transform: none;
		letter-spacing: 0;
		font-size: 0.875rem;
		font-weight: 600;
		color: #0f172a;
	}
	body.bp-collapsed .bp-nav-sub {
		display: block !important;
		margin: 0;
		padding: 0;
		border: 0;
	}
	body.bp-collapsed .bp-nav-item.is-flyout-open > .bp-nav-group,
	body.bp-collapsed .bp-nav-item.is-flyout-open > .bp-nav-link:not(.bg-slate-900) {
		background-color: #f1f5f9;
		color: #0f172a;
	}
	body.bp-collapsed .bp-brand-bar {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: auto;
		min-height: 0;
		padding: 0.65rem 0.35rem 0.45rem;
		gap: 0.15rem;
	}
	body.bp-collapsed .bp-brand-bar > div {
		justify-content: center;
		overflow: visible;
	}
	body.bp-collapsed .bp-collapse-btn {
		height: 1.75rem;
		width: 1.75rem;
	}
	body.bp-collapsed .bp-collapse-icon { transform: rotate(180deg); }
	body.bp-collapsed .bp-user-dock { padding: 0.6rem 0.4rem; }
	body.bp-collapsed .bp-user-bar {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.35rem;
		padding: 0.25rem;
	}
	body.bp-collapsed .bp-user-bar a.flex-1 {
		flex: none;
		justify-content: center;
	}
	body.bp-collapsed .bp-logout-btn { display: none; }
}

.bp-id-card,
.bp-id-card[data-theme="emerald-gold"] {
	background: linear-gradient(135deg, #063327 0%, #094233 55%, #031d16 100%);
	box-shadow: 0 24px 50px rgba(6, 78, 59, 0.38);
	border: 1px solid rgba(251, 191, 36, 0.5);
	box-shadow: 0 24px 50px rgba(6, 78, 59, 0.38), 0 0 0 1px rgba(252, 211, 77, 0.3);
}
.bp-id-card[data-theme="sapphire-platinum"] {
	background: linear-gradient(135deg, #0a1b3d 0%, #102a5c 55%, #060f24 100%);
	border: 1px solid rgba(125, 211, 252, 0.5);
	box-shadow: 0 24px 50px rgba(30, 58, 138, 0.4), 0 0 0 1px rgba(125, 211, 252, 0.3);
}
.bp-id-card[data-theme="burgundy-gold"] {
	background: linear-gradient(135deg, #3b0816 0%, #4d0c1e 55%, #24040d 100%);
	border: 1px solid rgba(252, 211, 77, 0.5);
	box-shadow: 0 24px 50px rgba(136, 19, 55, 0.38), 0 0 0 1px rgba(252, 211, 77, 0.3);
}
.bp-id-card[data-theme="obsidian-gold"] {
	background: linear-gradient(135deg, #121417 0%, #1a1d24 55%, #0a0b0d 100%);
	border: 1px solid rgba(245, 158, 11, 0.6);
	box-shadow: 0 24px 50px rgba(245, 158, 11, 0.22), 0 0 0 1px rgba(251, 191, 36, 0.4);
}
.bp-id-card[data-theme="azure-crest"] {
	background: linear-gradient(135deg, #0c2e4e 0%, #134470 55%, #071c30 100%);
	border: 1px solid rgba(251, 191, 36, 0.5);
	box-shadow: 0 24px 50px rgba(14, 116, 144, 0.35), 0 0 0 1px rgba(252, 211, 77, 0.3);
}
.bp-id-accent { color: #fcd34d; }
.bp-id-card[data-theme="sapphire-platinum"] .bp-id-accent { color: #7dd3fc; }
.bp-id-badge {
	background: rgba(251, 191, 36, 0.15);
	border: 1px solid rgba(251, 191, 36, 0.4);
	color: #fcd34d;
}
.bp-id-card[data-theme="sapphire-platinum"] .bp-id-badge {
	background: rgba(56, 189, 248, 0.2);
	border-color: rgba(56, 189, 248, 0.5);
	color: #e0f2fe;
}
.bp-id-card[data-theme="burgundy-gold"] .bp-id-badge {
	background: rgba(244, 63, 94, 0.2);
	color: #fde68a;
}
.bp-id-card-pattern {
	background-image:
		radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 1px, transparent 1px),
		radial-gradient(circle at 0% 0%, rgba(251,191,36,0.2) 1px, transparent 1px);
	background-size: 18px 18px, 36px 36px;
}

/* Bootstrap dialogs stay off-canvas until a page opens them. */
.modal.fade {
	display: none;
}

/* Per-student name chip (notifications + inbox) */
.sn-kid-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	border-radius: 999px;
	padding: .18rem .6rem .18rem .2rem;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.2;
	transition: transform .18s ease, box-shadow .18s ease;
	animation: sn-kid-pop .45s cubic-bezier(.22, 1, .36, 1) both;
}
.sn-kid-chip.is-compact {
	padding-inline-end: .5rem;
}
.sn-kid-chip:hover {
	transform: translateY(-1px);
}
.sn-kid-chip .sn-kid-mark {
	display: inline-flex;
	height: 1.2rem;
	width: 1.2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 900;
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
.sn-kid-chip .sn-kid-text {
	min-width: 0;
}
.sn-kid-chip.tone-0 {
	background: linear-gradient(135deg, #ecfeff, #e0f2fe);
	color: #0e7490;
	box-shadow: inset 0 0 0 1px #a5f3fc, 0 4px 10px rgba(8, 145, 178, .12);
}
.sn-kid-chip.tone-0 .sn-kid-mark {
	background: linear-gradient(135deg, #06b6d4, #0284c7);
}
.sn-kid-chip.tone-1 {
	background: linear-gradient(135deg, #fff7ed, #fef3c7);
	color: #c2410c;
	box-shadow: inset 0 0 0 1px #fed7aa, 0 4px 10px rgba(234, 88, 12, .12);
}
.sn-kid-chip.tone-1 .sn-kid-mark {
	background: linear-gradient(135deg, #f97316, #d97706);
}
.sn-kid-chip.tone-2 {
	background: linear-gradient(135deg, #f5f3ff, #fae8ff);
	color: #6d28d9;
	box-shadow: inset 0 0 0 1px #ddd6fe, 0 4px 10px rgba(124, 58, 237, .12);
}
.sn-kid-chip.tone-2 .sn-kid-mark {
	background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
.sn-kid-chip.tone-3 {
	background: linear-gradient(135deg, #ecfdf5, #d1fae5);
	color: #047857;
	box-shadow: inset 0 0 0 1px #a7f3d0, 0 4px 10px rgba(5, 150, 105, .12);
}
.sn-kid-chip.tone-3 .sn-kid-mark {
	background: linear-gradient(135deg, #10b981, #059669);
}
.sn-kid-chip.tone-4 {
	background: linear-gradient(135deg, #fff1f2, #fce7f3);
	color: #be123c;
	box-shadow: inset 0 0 0 1px #fecdd3, 0 4px 10px rgba(225, 29, 72, .12);
}
.sn-kid-chip.tone-4 .sn-kid-mark {
	background: linear-gradient(135deg, #f43f5e, #db2777);
}
@keyframes sn-kid-pop {
	from {
		opacity: 0;
		transform: translateY(.25rem) scale(.92);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Sidebar brand */
.sn-brand {
	background: linear-gradient(155deg, #1d4ed8 0%, #0f172a 46%, #065f46 100%);
}
.sn-brand-sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 110% -10%, rgba(251, 191, 36, .32), transparent 52%),
		radial-gradient(90% 70% at -10% 110%, rgba(56, 189, 248, .22), transparent 48%);
}
.sn-brand-blob {
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
	animation: sn-float 6.5s ease-in-out infinite;
}
.sn-brand-blob-a {
	width: 5.5rem;
	height: 5.5rem;
	top: -1.6rem;
	inset-inline-end: -1.2rem;
	background: rgba(251, 191, 36, .22);
}
.sn-brand-blob-b {
	width: 4.2rem;
	height: 4.2rem;
	bottom: -1.4rem;
	inset-inline-start: -1rem;
	background: rgba(52, 211, 153, .2);
	animation-delay: -2.4s;
}
.sn-brand-star {
	position: absolute;
	width: .28rem;
	height: .28rem;
	border-radius: 9999px;
	background: #fde68a;
	box-shadow: 0 0 6px #fbbf24;
	pointer-events: none;
	animation: sn-twinkle 2.2s ease-in-out infinite;
}
.sn-brand-star-1 {
	top: 18%;
	inset-inline-start: 42%;
}
.sn-brand-star-2 {
	top: 58%;
	inset-inline-end: 18%;
	animation-delay: -.8s;
}
.sn-brand-star-3 {
	top: 28%;
	inset-inline-end: 36%;
	animation-delay: -1.4s;
}
.sn-brand-logo {
	transition: transform .25s ease;
}
.sn-brand:hover .sn-brand-logo {
	transform: rotate(-6deg) scale(1.04);
}
@keyframes sn-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(.45rem) scale(1.08); }
}
@keyframes sn-twinkle {
	0%, 100% { opacity: .25; transform: scale(.8); }
	50% { opacity: 1; transform: scale(1.3); }
}

/* Inbox (msgs) */
.sn-inbox-shell {
	background:
		radial-gradient(ellipse 65% 45% at 100% 0%, rgba(14, 165, 233, .14), transparent 55%),
		radial-gradient(ellipse 50% 40% at 0% 10%, rgba(15, 23, 42, .06), transparent 50%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f1f5f9 100%);
}
.sn-inbox-card {
	animation: sn-inbox-in .4s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sn-inbox-in {
	from { opacity: 0; transform: translateY(.45rem); }
	to { opacity: 1; transform: translateY(0); }
}
.sn-inbox-item {
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sn-inbox-item:hover {
	background: #f8fafc;
}
.sn-inbox-item.is-active {
	background: #eff6ff;
	border-color: #bae6fd;
	box-shadow: inset 3px 0 0 #0ea5e9;
}
.sn-inbox-item.is-unread .sn-inbox-subject {
	font-weight: 800;
	color: #0f172a;
}
.sn-inbox-item.is-hidden {
	display: none !important;
}
.sn-inbox-dot {
	box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
}
.sn-inbox-list {
	max-height: min(70vh, 32rem);
	-webkit-overflow-scrolling: touch;
}
.sn-inbox-reader-body {
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
	.sn-inbox-page.is-reading .sn-inbox-toolbar,
	.sn-inbox-layout.is-reading .sn-inbox-list-pane {
		display: none !important;
	}
	.sn-inbox-layout:not(.is-reading) .sn-inbox-reader-pane {
		display: none !important;
	}
	.sn-inbox-list {
		max-height: none;
	}
	.sn-inbox-reader-pane {
		min-height: calc(100vh - 8.5rem);
	}
	.sn-inbox-reader-body {
		max-height: none;
	}
	.sn-inbox-subject-panel {
		max-height: min(50vh, 18rem);
	}
	.sn-inbox-subject-panel #sn-subject-list {
		max-height: min(38vh, 14rem);
	}
	.sn-inbox-item.is-active {
		box-shadow: none;
	}
}
@media (min-width: 1024px) {
	.sn-inbox-back {
		display: none !important;
	}
}

/* Compose message (msg) */
.sn-msg-shell {
	background:
		radial-gradient(ellipse 65% 45% at 0% 0%, rgba(14, 165, 233, .14), transparent 55%),
		radial-gradient(ellipse 50% 40% at 100% 10%, rgba(15, 23, 42, .06), transparent 50%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f1f5f9 100%);
}
.sn-msg-drop {
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.sn-msg-drop.is-drag {
	border-color: #0f172a;
	background: #f8fafc;
	transform: scale(1.01);
}
.sn-msg-drop.is-busy {
	opacity: .7;
	pointer-events: none;
}
.sn-msg-card {
	animation: sn-msg-in .4s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sn-msg-in {
	from { opacity: 0; transform: translateY(.45rem); }
	to { opacity: 1; transform: translateY(0); }
}

/* Homework materials */
#sn-hw-status [data-hw-filter] {
	background: #fff;
}
#sn-hw-status [data-hw-filter].is-on {
	background: #0f172a;
	color: #fff;
}
.sn-hw-drop {
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.sn-hw-drop.is-drag {
	border-color: #0f172a;
	background: #f8fafc;
	transform: scale(1.01);
}
.sn-hw-drop.is-busy {
	opacity: .72;
	pointer-events: none;
}
@keyframes sn-hw-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(15, 23, 42, .12); }
	50% { box-shadow: 0 0 0 .5rem rgba(15, 23, 42, 0); }
}
.sn-hw-drop.has-files {
	animation: sn-hw-pulse 1.6s ease-in-out 1;
}

/* Learning materials */
#sn-lm-status [data-lm-filter] {
	background: #fff;
}
#sn-lm-status [data-lm-filter].is-on {
	background: #0f172a;
	color: #fff;
}
.sn-lm-card {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sn-lm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .35);
	border-color: #cbd5e1;
}

/* Registration */
.pn-reg-shell {
	background:
		radial-gradient(ellipse 65% 45% at 100% 0%, rgba(13, 148, 136, .12), transparent 55%),
		radial-gradient(ellipse 45% 35% at 0% 100%, rgba(14, 165, 233, .08), transparent 50%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f1f5f9 100%);
}
.pn-reg-step {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pn-reg-step.is-on {
	border-color: rgb(13 148 136);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, .12);
	transform: translateY(-1px);
}
#sig {
	touch-action: none;
	cursor: crosshair;
	border-radius: 1rem;
	border: 1px dashed rgb(148 163 184);
	background:
		repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(241, 245, 249, .7) 8px, rgba(241, 245, 249, .7) 9px),
		#fff;
	min-height: 160px;
}
#sig canvas {
	width: 100% !important;
	height: 160px !important;
	border-radius: 1rem;
}
.pn-reg-check:checked + span {
	color: rgb(15 23 42);
}
@keyframes pn-reg-in {
	from { opacity: 0; transform: translateY(.6rem); }
	to { opacity: 1; transform: translateY(0); }
}
.pn-reg-anim {
	animation: pn-reg-in .45s cubic-bezier(.22, 1, .36, 1) both;
}

/* Change password */
.sn-pass-shell {
	background:
		radial-gradient(ellipse 70% 50% at 100% 0%, rgba(13, 148, 136, .14), transparent 55%),
		radial-gradient(ellipse 50% 40% at 0% 100%, rgba(15, 23, 42, .06), transparent 50%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
}
.sn-pass-meter span {
	transition: width .25s ease, background-color .25s ease;
}
.sn-pass-shake {
	animation: sn-pass-shake .35s ease;
}
@keyframes sn-pass-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
.sn-pass-ok {
	animation: sn-pass-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sn-pass-in {
	from { opacity: 0; transform: translateY(.5rem) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Student card print */
@media print {
	aside,
	header,
	#bp-toast,
	[data-card-flip],
	[data-card-theme],
	button {
		display: none !important;
	}
	main {
		padding: 0 !important;
		max-width: none !important;
	}
	.bp-id-card {
		box-shadow: none !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* Phone-suited kid picker */
.pn-kid-picker {
	position: relative;
}
.pn-kid-avatar {
	display: inline-flex;
	height: 2.5rem;
	width: 2.5rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 900;
	color: #fff;
	box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.pn-kid-avatar-lg {
	height: 3rem;
	width: 3rem;
	font-size: 1rem;
}
.pn-kid-dock {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 55;
	padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .92);
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 -12px 28px rgba(15, 23, 42, .1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.pn-kid-dock .pn-kid-trigger {
	margin: 0;
	box-shadow: none;
}
#bp-main.has-pn-kid-dock {
	padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}
#bp-toast {
	bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
	.pn-kid-dock {
		display: none !important;
	}
	#bp-main.has-pn-kid-dock {
		padding-bottom: 0;
	}
	#bp-toast {
		bottom: 1.5rem;
	}
}
.pn-kid-trigger {
	display: flex;
	width: 100%;
	align-items: center;
	gap: .75rem;
	border-radius: 1.15rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: .7rem .85rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pn-kid-trigger:not(.is-static):active {
	transform: scale(.99);
}
.pn-kid-trigger.tone-0 { border-color: #a5f3fc; box-shadow: 0 8px 20px -16px rgba(8, 145, 178, .45); }
.pn-kid-trigger.tone-0 .pn-kid-avatar { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.pn-kid-trigger.tone-1 { border-color: #fed7aa; box-shadow: 0 8px 20px -16px rgba(234, 88, 12, .4); }
.pn-kid-trigger.tone-1 .pn-kid-avatar { background: linear-gradient(135deg, #f97316, #d97706); }
.pn-kid-trigger.tone-2 { border-color: #ddd6fe; box-shadow: 0 8px 20px -16px rgba(124, 58, 237, .4); }
.pn-kid-trigger.tone-2 .pn-kid-avatar { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.pn-kid-trigger.tone-3 { border-color: #a7f3d0; box-shadow: 0 8px 20px -16px rgba(5, 150, 105, .4); }
.pn-kid-trigger.tone-3 .pn-kid-avatar { background: linear-gradient(135deg, #10b981, #059669); }
.pn-kid-trigger.tone-4 { border-color: #fecdd3; box-shadow: 0 8px 20px -16px rgba(225, 29, 72, .4); }
.pn-kid-trigger.tone-4 .pn-kid-avatar { background: linear-gradient(135deg, #f43f5e, #db2777); }
.pn-kid-trigger-action {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	border-radius: 999px;
	background: #0f172a;
	padding: .4rem .7rem;
	color: #fff;
}
.pn-kid-chips {
	align-items: stretch;
	gap: .5rem;
	overflow-x: auto;
	padding-bottom: .15rem;
	scrollbar-width: thin;
}
.pn-kid-chip-btn {
	display: inline-flex;
	min-width: 9.5rem;
	max-width: 13rem;
	flex: 0 0 auto;
	align-items: center;
	gap: .55rem;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: .55rem .7rem;
	color: #0f172a;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pn-kid-chip-btn:hover {
	transform: translateY(-1px);
}
.pn-kid-chip-btn.is-active {
	box-shadow: inset 0 0 0 1px currentColor;
}
.pn-kid-chip-btn.tone-0 .pn-kid-avatar,
.pn-kid-sheet-row.tone-0 .pn-kid-avatar { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.pn-kid-chip-btn.tone-1 .pn-kid-avatar,
.pn-kid-sheet-row.tone-1 .pn-kid-avatar { background: linear-gradient(135deg, #f97316, #d97706); }
.pn-kid-chip-btn.tone-2 .pn-kid-avatar,
.pn-kid-sheet-row.tone-2 .pn-kid-avatar { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.pn-kid-chip-btn.tone-3 .pn-kid-avatar,
.pn-kid-sheet-row.tone-3 .pn-kid-avatar { background: linear-gradient(135deg, #10b981, #059669); }
.pn-kid-chip-btn.tone-4 .pn-kid-avatar,
.pn-kid-sheet-row.tone-4 .pn-kid-avatar { background: linear-gradient(135deg, #f43f5e, #db2777); }
.pn-kid-chip-btn.tone-0.is-active { border-color: #67e8f9; color: #0e7490; background: linear-gradient(135deg, #ecfeff, #e0f2fe); }
.pn-kid-chip-btn.tone-1.is-active { border-color: #fdba74; color: #c2410c; background: linear-gradient(135deg, #fff7ed, #fef3c7); }
.pn-kid-chip-btn.tone-2.is-active { border-color: #c4b5fd; color: #6d28d9; background: linear-gradient(135deg, #f5f3ff, #fae8ff); }
.pn-kid-chip-btn.tone-3.is-active { border-color: #6ee7b7; color: #047857; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.pn-kid-chip-btn.tone-4.is-active { border-color: #fda4af; color: #be123c; background: linear-gradient(135deg, #fff1f2, #fce7f3); }

.pn-kid-sheet {
	position: fixed;
	inset: 0;
	z-index: 70;
}
.pn-kid-sheet[hidden] {
	display: none !important;
}
.pn-kid-sheet.is-open {
	display: block;
}
.pn-kid-sheet-scrim {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(15, 23, 42, .48);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	cursor: pointer;
}
.pn-kid-sheet-panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	max-height: min(78vh, 34rem);
	overflow: auto;
	border-radius: 1.5rem 1.5rem 0 0;
	background: #fff;
	box-shadow: 0 -18px 40px rgba(15, 23, 42, .18);
	transform: translateY(110%);
	transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.pn-kid-sheet.is-open .pn-kid-sheet-panel {
	transform: translateY(0);
}
.pn-kid-sheet-handle {
	width: 2.75rem;
	height: .28rem;
	margin: .65rem auto .35rem;
	border-radius: 999px;
	background: #cbd5e1;
}
.pn-kid-sheet-list {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.pn-kid-sheet-row {
	display: flex;
	min-height: 3.75rem;
	width: 100%;
	align-items: center;
	gap: .75rem;
	border-radius: 1.1rem;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: .7rem .8rem;
	text-align: start;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pn-kid-sheet-row:active {
	transform: scale(.985);
}
.pn-kid-sheet-row.is-active {
	border-color: #0f172a;
	background: #f8fafc;
}
.pn-kid-check {
	display: inline-flex;
	height: 1.75rem;
	width: 1.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
}
body.pn-kid-sheet-open {
	overflow: hidden;
}
body.pn-kid-sheet-open .pn-kid-dock {
	visibility: hidden;
	pointer-events: none;
}