/* assets/css/features/app.css */
body.wtapp-shell-body.wtapp-route-app .wtapp-main-shell {
	min-height: 62vh;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) {
	--wtapp-shell-bg: color-mix(in srgb, var(--wtapp-public-surface-strong) 86%, transparent);
	--wtapp-shell-surface: color-mix(in srgb, var(--wtapp-public-brand) 6%, var(--wtapp-public-surface-strong));
	--wtapp-shell-surface-strong: color-mix(in srgb, var(--wtapp-public-surface-strong) 97%, transparent);
	--wtapp-shell-ink: var(--wtapp-public-ink);
	--wtapp-shell-muted: var(--wtapp-public-muted);
	--wtapp-shell-line: var(--wtapp-public-line);
	--wtapp-shell-divider: color-mix(in srgb, var(--wtapp-public-muted) 24%, transparent);
	--wtapp-shell-brand: var(--wtapp-public-brand);
	--wtapp-shell-brand-deep: var(--wtapp-public-brand-deep);
	--wtapp-shell-pill-active: color-mix(in srgb, var(--wtapp-public-brand) 16%, var(--wtapp-public-surface-strong));
	--wtapp-shell-shadow: var(--wtapp-public-topbar-shadow);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app {
	background: var(--wtapp-shell-bg);
	border-bottom: 1px solid var(--wtapp-shell-line);
	box-shadow: var(--wtapp-shell-shadow);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-topbar__inner {
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 28px;
	padding: 10px 0;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-brand__subtitle {
	display: none;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-brand__title {
	font-family: "Avenir Next", "Segoe UI", sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--wtapp-shell-brand);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-nav {
	justify-self: start;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	gap: 10px;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-nav__link {
	padding: 5px 10px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--wtapp-shell-ink);
	background: transparent;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-nav__link:hover,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-nav__link:focus-visible {
	color: var(--wtapp-shell-brand);
	background: color-mix(in srgb, var(--wtapp-shell-brand) 10%, transparent);
	transform: none;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-nav__link.is-active {
	background: var(--wtapp-shell-pill-active);
	color: var(--wtapp-shell-brand);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-tools,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-public-tools,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-member-tools,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-auth-tools {
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: nowrap;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search--topbar {
	flex: 0 1 278px;
	min-width: 220px;
	min-height: 42px;
	padding: 4px;
	border-radius: 18px;
	background: var(--wtapp-shell-surface-strong);
	border: 1px solid color-mix(in srgb, var(--wtapp-shell-line) 88%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
	overflow: hidden;
	transition: width 180ms ease, min-width 180ms ease, padding 180ms ease, gap 180ms ease;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search--topbar:focus-within {
	border-color: color-mix(in srgb, var(--wtapp-shell-brand) 42%, transparent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wtapp-shell-brand) 14%, transparent);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search--topbar[data-wtapp-topbar-search="1"]:not(.is-open) {
	flex: 0 0 40px;
	min-width: 40px;
	padding: 0;
	gap: 0;
	border-radius: 999px;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search__input {
	color: var(--wtapp-shell-ink);
	padding-inline: 10px 8px;
	font-size: 0.95rem;
	font-weight: 600;
	transition: width 180ms ease, opacity 180ms ease, padding 180ms ease;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search__input::placeholder {
	color: var(--wtapp-shell-muted);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search--topbar[data-wtapp-topbar-search="1"]:not(.is-open) .wtapp-search__input {
	width: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-badge-link,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-notification-center__toggle,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account {
	white-space: nowrap;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search__submit {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wtapp-shell-brand) 12%, var(--wtapp-shell-surface-strong));
	border: 1px solid color-mix(in srgb, var(--wtapp-shell-brand) 18%, transparent);
	color: var(--wtapp-shell-brand);
	box-shadow: none;
	flex: 0 0 34px;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-theme-toggle,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-notification-center__toggle,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-action--ghost {
	background: color-mix(in srgb, var(--wtapp-shell-surface) 96%, transparent);
	border: 1px solid var(--wtapp-shell-line);
	color: var(--wtapp-shell-ink);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-theme-toggle:hover,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-search__submit:hover {
	background: color-mix(in srgb, var(--wtapp-shell-brand) 15%, var(--wtapp-shell-surface-strong));
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-badge-link {
	background: color-mix(in srgb, var(--wtapp-shell-brand) 10%, var(--wtapp-shell-surface-strong));
	border: 1px solid color-mix(in srgb, var(--wtapp-shell-brand) 26%, transparent);
	color: var(--wtapp-shell-brand);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account__avatar {
	border-color: color-mix(in srgb, var(--wtapp-shell-brand) 32%, transparent);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__panel {
	min-width: 210px;
	background: color-mix(in srgb, var(--wtapp-shell-surface-strong) 98%, transparent);
	border-color: var(--wtapp-shell-line);
	box-shadow: var(--wtapp-shell-shadow);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-notification-center__panel {
	background: color-mix(in srgb, var(--wtapp-shell-surface-strong) 98%, transparent);
	border-color: var(--wtapp-shell-line);
	box-shadow: var(--wtapp-shell-shadow);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account--menu {
	padding-right: 14px;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item {
	color: var(--wtapp-shell-ink);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item:hover,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item:focus-visible {
	background: color-mix(in srgb, var(--wtapp-shell-brand) 10%, transparent);
	color: var(--wtapp-shell-brand);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item--logout {
	color: #ef4444;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item--logout:hover,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-header-account-menu__item--logout:focus-visible {
	color: #ef4444;
	background: color-mix(in srgb, #ef4444 18%, transparent);
}

body.wtapp-shell-body.wtapp-route-app .wtapp-surface--account-form,
body.wtapp-shell-body.wtapp-route-app .wtapp-surface--library,
body.wtapp-shell-body.wtapp-route-app .wtapp-surface--wallet,
body.wtapp-shell-body.wtapp-route-app .wtapp-surface--tts {
	scroll-margin-top: 110px;
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer {
	border-top: 1px solid var(--wtapp-shell-line);
	background: color-mix(in srgb, var(--wtapp-shell-surface-strong) 90%, transparent);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer__copyright {
	color: var(--wtapp-shell-muted);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer__links--inline a {
	color: var(--wtapp-shell-brand);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer__social .wtapp-social-links__link {
	background: color-mix(in srgb, var(--wtapp-shell-surface) 96%, transparent);
	border: 1px solid var(--wtapp-shell-line);
	color: var(--wtapp-shell-ink);
}

body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer__social .wtapp-social-links__link:hover,
body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-footer__social .wtapp-social-links__link:focus-visible {
	background: color-mix(in srgb, var(--wtapp-shell-brand) 12%, var(--wtapp-shell-surface-strong));
	color: var(--wtapp-shell-brand);
}

@media (max-width: 1200px) {
	body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-topbar__inner {
		grid-template-columns: 1fr;
	}

	body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-auth-tools,
	body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-member-tools {
		justify-content: flex-start;
	}
}

@media (max-width: 1180px) {
	body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-topbar__inner {
		grid-template-columns: auto minmax(0, 1fr);
	}

	body.wtapp-shell-body.wtapp-route-app:not(.wtapp-reader-mode) .wtapp-topbar--app .wtapp-topbar__rail {
		grid-column: 1 / -1;
		justify-self: start;
	}
}