/* Launcher Base */
body.my-apps-launcher {
	margin: 0;
	padding: 20px;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
	/* Opt the launcher modals into both colour schemes so light-dark()
	   picks up the OS preference. The launcher grid itself sits on a
	   user-chosen gradient and is unaffected by these palette vars. */
	color-scheme: light dark;
	--ma-bg:           light-dark(#ffffff, #1c1c1e);
	--ma-bg-secondary: light-dark(#f6f6f6, #2c2c2e);
	--ma-bg-tertiary:  light-dark(#fafafa, #242426);
	--ma-bg-tinted:    light-dark(#f6f7ff, #1d2030);
	--ma-fg:           light-dark(#1e1e1e, #f0f0f0);
	--ma-fg-secondary: light-dark(#444444, #b8b8b8);
	--ma-fg-muted:     light-dark(#888888, #8e8e93);
	--ma-fg-subtle:    light-dark(#aaaaaa, #6e6e72);
	--ma-border:       light-dark(#e8e8e8, #3a3a3c);
	--ma-border-subtle:light-dark(#f0f0f0, #2a2a2c);
	--ma-hover-bg:     light-dark(#e8e8e8, #353537);
	--ma-button-bg:    light-dark(#ebebeb, #353537);
	--ma-button-bg-hover: light-dark(#d6d6d6, #45454a);
}

/* Block themes commonly uppercase button text and tighten letter-spacing
   via their global button styles. Reset both for buttons inside the
   launcher so the UI doesn't shout at people. Specific elements that
   intentionally use uppercase (e.g. .recipe-card-meta) override this. */
body.my-apps-launcher button {
	text-transform: none;
	letter-spacing: normal;
}

/* The launcher's modals, sidebar, and forms all assume light backgrounds.
   In OS-level dark mode, browser-default form controls render light text
   that disappears against our white inputs — pin a dark colour and
   explicit white background so the rendering is consistent everywhere. */
body.my-apps-launcher input[type="text"],
body.my-apps-launcher input[type="url"],
body.my-apps-launcher input[type="search"],
body.my-apps-launcher input:not([type]) {
	background: var(--ma-bg);
	color: var(--ma-fg);
}

body.my-apps-launcher input::placeholder {
	color: var(--ma-fg-muted);
	opacity: 1;
}

/* Without an explicit ::selection rule, OS dark mode picks dark grey
   text on a dark blue selection background — unreadable inside the
   light-themed launcher and modals. Force a high-contrast pair. */
body.my-apps-launcher ::selection {
	background: #3858e9;
	color: #fff;
}

/* Background Options */
.bg-gradient-purple, body.my-apps-launcher.bg-gradient-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-blue, body.my-apps-launcher.bg-gradient-blue { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); }
.bg-gradient-green, body.my-apps-launcher.bg-gradient-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.bg-gradient-orange, body.my-apps-launcher.bg-gradient-orange { background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%); }
.bg-gradient-pink, body.my-apps-launcher.bg-gradient-pink { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.bg-gradient-dark, body.my-apps-launcher.bg-gradient-dark { background: linear-gradient(135deg, #232526 0%, #414345 100%); }
.bg-gradient-sunset, body.my-apps-launcher.bg-gradient-sunset { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.bg-gradient-ocean, body.my-apps-launcher.bg-gradient-ocean { background: linear-gradient(135deg, #2e3192 0%, #1bffff 100%); }
.bg-solid-gray, body.my-apps-launcher.bg-solid-gray { background: #6b7280; }
.bg-solid-blue, body.my-apps-launcher.bg-solid-blue { background: #3b82f6; }
.bg-solid-green, body.my-apps-launcher.bg-solid-green { background: #10b981; }
.bg-solid-red, body.my-apps-launcher.bg-solid-red { background: #ef4444; }
.bg-solid-purple, body.my-apps-launcher.bg-solid-purple { background: #8b5cf6; }
.bg-solid-dark, body.my-apps-launcher.bg-solid-dark { background: #1f2937; }

@media (max-width: 600px) {
	body.my-apps-launcher {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Toolbar */
.launcher-toolbar {
	position: fixed;
	top: 44px;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	z-index: 100;
}

body:not(.edit-mode) .launcher-toolbar .edit-only {
	display: none;
}

@media screen and (max-width: 782px) {
	.launcher-toolbar {
		top: 58px;
	}
	.hidden-popup,
	.bg-picker-popup {
		top: 116px;
	}
}

.launcher-toolbar .toolbar-btn {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.2);
	border: 0;
	border-radius: 8px;
	padding: 8px;
	margin: 0;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	box-sizing: border-box;
	min-height: 0;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.2s;
}

.launcher-toolbar .toolbar-btn.done-btn {
	padding: 8px 16px;
	width: auto;
}

.launcher-toolbar .toolbar-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.toolbar-btn svg {
	fill: currentColor;
}

.launcher-toolbar .done-btn {
	display: none;
	background: rgba(255, 255, 255, 0.9);
	color: #764ba2;
}

.launcher-toolbar .done-btn:hover {
	background: #fff;
	color: #764ba2;
}

body.edit-mode .launcher-toolbar .edit-btn {
	display: none;
}

body.edit-mode .launcher-toolbar .done-btn {
	display: flex;
}

/* Greeting */
.greeting {
	text-align: center;
	padding-top: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.greeting:empty {
	display: none;
}
.greeting .greeting-name {
	cursor: pointer;
	border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
	transition: border-color 0.2s;
}
.greeting .greeting-name:hover {
	border-bottom-color: #fff;
}
.greeting .greeting-edit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.greeting .greeting-edit input {
	font: inherit;
	font-size: 24px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	color: #fff;
	padding: 2px 10px;
	outline: none;
	text-align: center;
	max-width: 200px;
}
.greeting .greeting-edit input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.greeting .greeting-edit input:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.3);
}
.greeting .greeting-nudge {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin-top: 4px;
	opacity: 0.8;
}

/* Apps Container */
.apps-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--app-gap, 16px);
	padding-top: 20px;
}

.apps-container.layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 6), 1fr);
	justify-items: center;
	gap: var(--app-gap, 16px);
	max-width: calc(var(--grid-columns, 6) * (var(--app-size, 60px) + 46px));
	margin: 0 auto;
	padding-top: 20px;
}

@media (max-width: 600px) {
	.apps-container.layout-grid {
		grid-template-columns: repeat(auto-fill, minmax(calc(var(--app-size, 60px) + 46px), 1fr));
		max-width: 100%;
	}
}

/* App Icon */
.app-icon {
	width: calc(var(--app-size, 60px) + 30px);
	text-align: center;
	cursor: pointer;
	position: relative;
	padding: 8px;
	border-radius: 12px;
	transition: transform 0.15s, opacity 0.3s;
}

.app-icon:hover {
	transform: scale(1.05);
}

.app-icon:active {
	transform: scale(0.95);
}

.app-icon.hiding {
	opacity: 0;
	transform: scale(0.5);
}

.app-link {
	text-decoration: none;
	display: block;
}

.app-icon img,
.app-icon div.dashicons {
	width: var(--app-size, 60px);
	height: var(--app-size, 60px);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: block;
	margin: 0 auto;
}

.app-icon div.dashicons {
	font-size: calc(var(--app-size, 60px) * 0.67);
	line-height: var(--app-size, 60px);
	color: #333;
}

.app-gradient-icon {
	width: var(--app-size, 60px);
	height: var(--app-size, 60px);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.9);
}

.app-gradient-icon svg {
	width: 65%;
	height: 65%;
}

.app-gradient-icon-small {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	box-shadow: none;
}

svg.app-letter-icon {
	display: block;
	width: var(--app-size, 60px);
	height: var(--app-size, 60px);
	margin: 0 auto;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

svg.app-letter-icon.app-letter-icon-small {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	box-shadow: none;
}

.app-icon .emoji {
	font-size: calc(var(--app-size, 60px) * 0.83);
	line-height: var(--app-size, 60px);
	height: var(--app-size, 60px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-title {
	font-size: 12px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	margin: 6px 0 0 0;
	line-height: 1.3;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: break-word;
	min-height: 2lh;
	max-height: 2lh;
}

/* Hide Button */
.hide-btn {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: none;
	z-index: 10;
}

.hide-btn svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.hide-btn:hover svg circle {
	fill: #e74c3c;
}

body.edit-mode .hide-btn {
	display: block;
}

/* Just-Added Highlight Animation */
@keyframes my-apps-pop-in {
	0%   { transform: scale(0.3); opacity: 0; }
	60%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes my-apps-glow-pulse {
	0%   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.9); }
	40%  { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 14px rgba(255, 255, 255, 0.45); }
	100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 28px rgba(255, 255, 255, 0); }
}

.app-icon.just-added {
	animation: my-apps-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-icon.just-added img,
.app-icon.just-added div.dashicons,
.app-icon.just-added .emoji,
.app-icon.just-added svg.app-letter-icon {
	animation: my-apps-glow-pulse 1.1s ease-out 0.45s 2;
}

/* Edit Mode Wiggle Animation */
@keyframes wiggle {
	0%, 100% { transform: rotate(-1deg); }
	50% { transform: rotate(1deg); }
}

body.edit-mode .app-icon:not(.add-app-btn) {
	animation: wiggle 0.3s ease-in-out infinite;
}

body.edit-mode .app-icon:nth-child(even) {
	animation-delay: 0.15s;
}

body.edit-mode .app-icon:hover,
body.edit-mode .app-icon.sortable-chosen {
	animation: none;
}

/* Add App Button */
.add-app-btn {
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.3s;
}

.add-app-btn:hover {
	opacity: 1;
	transform: none;
}

.add-icon {
	width: var(--app-size, 60px);
	height: var(--app-size, 60px);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.3);
	border: 2px dashed rgba(255, 255, 255, 0.6);
	margin: 0 auto;
	font-size: 32px;
	line-height: 64px;
	color: #fff;
}

body.edit-mode .add-app-btn {
	animation: none;
	opacity: 1;
}

/* App Store Modal */
.modal.modal-wide {
	max-width: 820px;
	max-height: 85vh;
	overflow: hidden;
}

/* Two-pane layout: sidebar + main */
.app-store-layout {
	display: flex;
	height: calc(85vh - 2px);
	max-height: calc(85vh - 2px);
}

.app-store-sidebar {
	width: 180px;
	flex-shrink: 0;
	background: var(--ma-bg-secondary);
	border-right: 1px solid var(--ma-border);
	display: flex;
	flex-direction: column;
	border-radius: 12px 0 0 12px;
	overflow: hidden;
}

.app-store-search {
	padding: 14px 12px 8px;
}

.app-store-search input {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	font-size: 13px;
	background: var(--ma-bg);
	box-sizing: border-box;
}

.app-store-search input:focus {
	outline: none;
	border-color: #3858e9;
	box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.15);
}

.app-store-nav {
	list-style: none;
	margin: 0;
	padding: 4px 8px;
	flex: 1;
	overflow-y: auto;
}

.app-store-nav-item {
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--ma-fg);
	cursor: pointer;
	transition: background 0.12s;
	margin-bottom: 1px;
}

.app-store-nav-item:hover {
	background: var(--ma-hover-bg);
}

.app-store-nav-item.active {
	background: #3858e9;
	color: #fff;
}

.app-store-nav-divider {
	height: 1px;
	background: var(--ma-border);
	margin: 6px 10px;
	list-style: none;
}

.app-store-nav-external a {
	color: var(--ma-fg-muted);
	text-decoration: none;
	display: block;
}

.app-store-nav-external:hover a {
	color: var(--ma-fg);
}

.app-store-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.app-store-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px 14px;
	flex-shrink: 0;
}

.app-store-main-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--ma-fg);
}

.app-store-main-header .modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--ma-fg-muted);
	padding: 0;
	line-height: 1;
}

body.my-apps-launcher .app-store-main-header .modal-close:hover,
body.my-apps-launcher .app-store-main-header .modal-close:focus,
body.my-apps-launcher .app-store-main-header .modal-close:active {
	color: #333;
	background: none;
	outline: none;
	box-shadow: none;
	border: none;
}

.app-store-content {
	padding: 0 24px 24px;
	overflow-y: auto;
	flex: 1;
}

.app-store-form-view {
	padding: 0 24px 24px;
	overflow-y: auto;
	flex: 1;
}

.app-store-form-view[hidden] {
	display: none;
}

#admin-link-view:not([hidden]) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#admin-link-view .admin-menu-search {
	flex-shrink: 0;
}

#admin-link-view .admin-menu-tree {
	flex: 1;
	max-height: none;
	min-height: 0;
}

.app-store-loading {
	text-align: center;
	padding: 60px 20px;
	color: #888;
	font-size: 15px;
}

.app-store-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.app-store-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ma-border-subtle);
}

.app-store-item:last-child {
	border-bottom: none;
}

.app-store-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.app-store-icon svg {
	width: 26px;
	height: 26px;
}

.app-store-item-plugin .app-store-icon {
	background: transparent;
	overflow: hidden;
}

.app-store-item-plugin .app-store-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.app-store-info {
	flex: 1;
	min-width: 0;
}

.app-store-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ma-fg);
	margin: 0;
	line-height: 1.3;
}

.app-store-category {
	font-size: 11px;
	color: var(--ma-fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 500;
	margin: 0 0 1px;
}

.app-store-description {
	font-size: 12px;
	color: var(--ma-fg-muted);
	line-height: 1.4;
	margin: 2px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-store-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.app-store-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 500;
	color: light-dark(#1a7f37, #7ee2a8);
	background: light-dark(#dafbe1, #1f3a2a);
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.app-store-badge-modified {
	color: light-dark(#9a6700, #e8c468);
	background: light-dark(#fff8c5, #3a3320);
	cursor: pointer;
	transition: all 0.15s;
}

.app-store-badge-modified:hover {
	color: light-dark(#953800, #f0a070);
	background: light-dark(#ffd8b5, #4a2f1a);
}

.app-store-author {
	font-size: 11px;
	color: var(--ma-fg-subtle);
}

.app-store-actions {
	flex-shrink: 0;
}

.app-store-install-btn {
	display: inline-block;
	padding: 5px 16px;
	border: none;
	border-radius: 14px;
	background: var(--ma-button-bg);
	color: #3858e9;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.15s;
	min-width: 60px;
	text-align: center;
	text-decoration: none;
}

.app-store-install-btn:hover {
	background: #3858e9;
	color: #fff;
}

/* Blueprint details shown on non-Playground installs */
.app-store-blueprint-info {
	margin-top: 8px;
	padding: 10px 12px;
	background: #f6f7f7;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: #3c434a;
	display: none;
}

.app-store-blueprint-info.active {
	display: block;
}

.app-store-blueprint-info p {
	margin: 0 0 6px;
}

.app-store-blueprint-info p:last-child {
	margin-bottom: 0;
}

.app-store-blueprint-url {
	display: block;
	word-break: break-all;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: monospace;
	font-size: 11px;
	margin-top: 4px;
	cursor: pointer;
	user-select: all;
	color: #3858e9;
	text-decoration: none;
}

.app-store-blueprint-url:hover {
	border-color: #3858e9;
	background: #f6f7ff;
}

.app-store-error {
	text-align: center;
	padding: 60px 20px;
	color: var(--ma-fg-muted);
	font-size: 15px;
}

.app-store-intro {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--ma-bg-tinted);
	color: var(--ma-fg-secondary);
	font-size: 14px;
	line-height: 1.5;
}

.app-store-footer-link {
	margin: 24px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ma-border-subtle);
	text-align: center;
	font-size: 14px;
}

.app-store-footer-link a {
	color: #3858e9;
	text-decoration: none;
}

.app-store-footer-link a:hover {
	text-decoration: underline;
}

/* Clickable title and icon in list */
.app-store-title-link {
	cursor: pointer;
}

.app-store-title-link:hover {
	color: #3858e9;
}

.app-store-icon-link {
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}

.app-store-icon-link:hover {
	transform: scale(1.08);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

/* Clickable category labels */
.app-store-category-link {
	cursor: pointer;
	transition: color 0.12s;
}

.app-store-category-link:hover {
	color: #3858e9;
	text-decoration: underline;
}

/* Hide sidebar when showing detail page */
.app-store-sidebar-hidden {
	display: none;
}

/* ── App Detail Page ── */

.app-detail-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	color: #3858e9;
	padding: 0;
	margin-right: 8px;
	vertical-align: middle;
	font-family: inherit;
}

.app-detail-back-label {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

body.my-apps-launcher .app-detail-back:hover,
body.my-apps-launcher .app-detail-back:focus,
body.my-apps-launcher .app-detail-back:active {
	color: #2d4bd1;
	background: none;
	outline: none;
	box-shadow: none;
	border: none;
}

.app-detail-back svg {
	fill: currentColor;
}

.app-detail {
	padding-bottom: 24px;
}

.app-detail-header {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f0f0f0;
}

.app-detail-icon {
	width: 80px;
	height: 80px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.app-detail-icon svg {
	width: 40px;
	height: 40px;
}

.app-detail-header-info {
	flex: 1;
	min-width: 0;
}

.app-detail-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ma-fg);
	margin: 0 0 2px;
	line-height: 1.2;
}

.app-detail-subtitle {
	font-size: 13px;
	color: var(--ma-fg-muted);
	margin: 0 0 8px;
}

.app-detail-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.app-detail-categories {
	font-size: 12px;
	color: var(--ma-fg-muted);
}

.app-detail-header-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding-top: 4px;
}

.app-detail-install-btn {
	padding: 8px 28px;
	font-size: 15px;
	border-radius: 18px;
	min-width: 80px;
}

.app-detail-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #3858e9;
	cursor: pointer;
	padding: 4px;
	transition: color 0.15s;
}

body.my-apps-launcher .app-detail-share-btn:hover,
body.my-apps-launcher .app-detail-share-btn:focus,
body.my-apps-launcher .app-detail-share-btn:active {
	color: #2d4bd1;
	background: none;
	outline: none;
	box-shadow: none;
	border: none;
}

.app-detail-share-btn svg {
	fill: currentColor;
}

/* Toast */
.my-apps-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}

.my-apps-toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Screenshots */
.app-detail-screenshots {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 20px 0;
	scroll-snap-type: x mandatory;
}

.app-detail-screenshots:empty {
	display: none;
}

.app-detail-screenshot {
	height: 280px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Detail sections */
.app-detail-section {
	padding: 20px 0;
	border-bottom: 1px solid var(--ma-border-subtle);
}

.app-detail-section:last-child {
	border-bottom: none;
}

.app-detail-section h4 {
	font-size: 16px;
	font-weight: 600;
	color: var(--ma-fg);
	margin: 0 0 8px;
}

.app-detail-section p {
	font-size: 14px;
	color: var(--ma-fg-secondary);
	line-height: 1.6;
	margin: 0;
}

.app-detail-comp-loading {
	color: var(--ma-fg-muted);
	font-style: italic;
}

.app-detail-comp-note {
	color: var(--ma-fg-muted);
}

.app-detail-recipe-intro {
	color: var(--ma-fg-muted);
	margin: 0 0 12px;
}

.app-detail-recipe-list {
	padding: 0 0 0 24px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	counter-reset: none;
}

.app-detail-recipe-list li {
	font-size: 14px;
	color: var(--ma-fg);
	line-height: 1.5;
	padding: 4px 0;
}

.app-detail-recipe-list li::marker {
	color: #3858e9;
	font-weight: 600;
}

.app-detail-recipe-link {
	color: #3858e9;
	text-decoration: none;
	font-weight: 500;
}

.app-detail-recipe-link:hover {
	text-decoration: underline;
}

.app-detail-recipe-source {
	font-size: 12px;
	color: var(--ma-fg-muted);
}

.app-detail-recipe-source a {
	font-size: 12px;
	color: var(--ma-fg-muted);
	text-transform: none;
	word-break: break-all;
}

.app-detail-recipe-source a:hover {
	color: #3858e9;
}

.app-detail-recipe-ref {
	font-size: 12px;
	background: var(--ma-button-bg);
	padding: 1px 5px;
	border-radius: 4px;
}

.app-detail-landing-path {
	display: inline-block;
	padding: 2px 8px;
	background: #f0f0f0;
	border-radius: 4px;
	font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	color: #1e1e1e;
	cursor: pointer;
	user-select: all;
	transition: background 0.15s;
}

.app-detail-landing-path:hover {
	background: #e0e0e0;
}

/* Code toggle for runPHP steps */
.app-detail-code-toggle {
	background: none;
	border: none;
	color: #3858e9;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	font-family: inherit;
}

.app-detail-code-toggle:hover {
	color: #2d4bd1;
}

.app-detail-code-block {
	display: none;
	margin: 8px 0 0;
	padding: 12px 14px;
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: 8px;
	font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 300px;
	overflow-y: auto;
}

.app-detail-code-block.active {
	display: block;
}

/* GitHub badge on recipe items */
.app-detail-github-badge {
	display: block;
	font-size: 12px;
	color: #757575;
	margin-top: 2px;
	line-height: 1.4;
}

@media (max-width: 600px) {
	/* Sit the modal below the WP admin bar (46px on mobile) so the
	   sidebar's search bar isn't hidden behind it, and size the modal
	   off the remaining viewport so the bottom stays on-screen too.
	   The overlay still spans full-height; padding-top reserves the
	   admin-bar strip. */
	#install-software-modal.modal-overlay {
		padding: 0;
		padding-top: 46px;
		background: var(--ma-bg);
	}

	.modal.modal-wide {
		max-width: 100%;
		width: 100%;
		height: calc(100dvh - 46px);
		max-height: calc(100dvh - 46px);
		margin: 0;
		border-radius: 0;
	}

	.app-store-layout {
		flex-direction: column;
		height: calc(100dvh - 46px);
		max-height: calc(100dvh - 46px);
	}

	.app-store-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #e8e8e8;
		border-radius: 0;
		flex-shrink: 0;
	}

	.app-store-nav {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 4px;
		padding: 4px 8px 8px;
	}

	.app-store-nav-item {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.app-store-icon {
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}

	.app-store-icon svg {
		width: 22px;
		height: 22px;
	}
}

/* Settings Dropdown */
.settings-btn {
	position: relative;
}

.settings-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	padding: 6px 0;
	min-width: 150px;
	display: none;
	z-index: 200;
}

.settings-dropdown.active {
	display: block;
}

.settings-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	white-space: nowrap;
	text-align: left;
}

.settings-dropdown-item:hover {
	background: #f0f0f0;
}

.settings-dropdown-item svg {
	flex-shrink: 0;
}

.settings-dropdown-item.active {
	color: #3858e9;
	font-weight: 600;
}

.settings-dropdown-section {
	padding: 6px 16px 2px;
	font-size: 11px;
	font-weight: 600;
	color: #757575;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.settings-dropdown-slider {
	padding: 4px 16px 10px;
}

.settings-dropdown-slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	margin: 0;
	background: transparent;
	border: 0;
	outline: none;
	cursor: pointer;
}

.settings-dropdown-slider input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: #e0e0e0;
	border-radius: 2px;
}

.settings-dropdown-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #3858e9;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	margin-top: -5px;
}

.settings-dropdown-slider input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #3858e9;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.settings-dropdown-slider input[type="range"]::-moz-range-track {
	height: 4px;
	background: #e0e0e0;
	border-radius: 2px;
	border: none;
}

.settings-grid-only {
	display: none;
}

.settings-dropdown-divider {
	height: 1px;
	background: #e0e0e0;
	margin: 6px 0;
}

/* Background Picker */
.bg-picker-popup {
	position: fixed;
	top: 90px;
	left: 20px;
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	display: none;
	z-index: 200;
	min-width: 280px;
}

.bg-picker-popup.active {
	display: block;
}

.bg-picker-section {
	margin-bottom: 12px;
}

.bg-picker-section:last-child {
	margin-bottom: 0;
}

.bg-picker-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.bg-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bg-option {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s, border-color 0.15s;
}

.bg-option:hover {
	transform: scale(1.1);
}

.bg-option.selected {
	border-color: #000;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* Context Menu */
.context-menu {
	position: fixed;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	padding: 6px 0;
	min-width: 150px;
	z-index: 1000;
	display: none;
}

.context-menu.active {
	display: block;
}

.context-menu button {
	display: block;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}

.context-menu button:hover {
	background: #f0f0f0;
}

.context-menu hr {
	margin: 6px 0;
	border: none;
	border-top: 1px solid #eee;
}

/* Modal */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 20px;
}

.modal-overlay.active {
	display: flex;
}

.modal {
	background: var(--ma-bg);
	border-radius: 12px;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}

.modal-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #999;
	padding: 0;
	line-height: 1;
}

.modal-close:hover {
	color: #333;
}

#add-app-form {
	padding: 0;
}

.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--ma-fg);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	background: var(--ma-bg);
	color: var(--ma-fg);
}

.form-group input:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Icon Type Tabs */
.icon-type-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.icon-tab {
	flex: 1;
	padding: 8px;
	border: 1px solid var(--ma-border);
	background: var(--ma-bg-secondary);
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--ma-fg-secondary);
	transition: all 0.2s;
}

.icon-tab:hover {
	background: var(--ma-hover-bg);
	border-color: light-dark(#999, #50505a);
	color: var(--ma-fg);
}

.icon-tab.active {
	background: #667eea;
	color: #fff;
	border-color: #667eea;
}

.icon-input-group {
	position: relative;
}

.icon-input {
	display: none !important;
}

.icon-input.active {
	display: block !important;
}

.dashicon-picker-container,
.emoji-picker-container {
	display: none !important;
}

.dashicon-picker-container.active,
.emoji-picker-container.active {
	display: block !important;
}

/* Dashicon Picker */
.dashicon-picker {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
	padding: 8px;
	background: var(--ma-bg-tertiary);
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	margin-top: 8px;
}

.dashicon-option {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	background: var(--ma-bg);
	transition: all 0.15s;
}

.dashicon-option:hover {
	background: var(--ma-hover-bg);
	border-color: var(--ma-border);
}

.dashicon-option.selected {
	background: #667eea;
	border-color: #667eea;
	color: #fff;
}

.dashicon-option .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: var(--ma-fg);
}

.dashicon-option.selected .dashicons {
	color: #fff;
}

.dashicon-search {
	margin-bottom: 8px;
}

.dashicon-search input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
	background: var(--ma-bg);
	color: var(--ma-fg);
}

.dashicon-search input:focus {
	outline: none;
	border-color: #667eea;
}

/* Emoji Picker */
.emoji-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: 4px;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 8px;
	background: var(--ma-bg-tertiary);
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	margin-top: 8px;
}

.emoji-option {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	background: var(--ma-bg);
	font-size: 22px;
	transition: all 0.15s;
}

.emoji-option:hover {
	background: var(--ma-hover-bg);
	border-color: var(--ma-border);
	transform: scale(1.15);
}

.emoji-option.selected {
	background: #667eea;
	border-color: #667eea;
}

.emoji-search {
	margin-bottom: 8px;
}

.emoji-search input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
	background: var(--ma-bg);
	color: var(--ma-fg);
}

.emoji-search input:focus {
	outline: none;
	border-color: #667eea;
}

/* Icon Preview */
.icon-preview {
	margin-top: 12px;
	display: flex;
	justify-content: center;
}

.preview-box {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: var(--ma-bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.preview-box img {
	max-width: 100%;
	max-height: 100%;
}

.preview-box.preview-emoji {
	font-size: 40px;
	background: transparent;
}

.preview-box.preview-dashicon .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
}

/* Form Actions */
.form-actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.btn-add {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
	background: #667eea;
	color: #fff;
}

.btn-add:hover {
	background: #5a6fd6;
}

/* Sortable Styles */
.sortable-ghost {
	opacity: 0.4;
}

.sortable-chosen {
	transform: scale(1.1);
	transition: none;
}

.sortable-drag {
	opacity: 1 !important;
	transition: none;
}

/* Admin Page Styles */
.settings_page_my-apps table img,
.settings_page_my-apps table div.dashicons {
	vertical-align: middle;
	width: 24px;
	height: 24px;
}

.settings_page_my-apps table thead th.checkbox,
.settings_page_my-apps table thead th.icon,
.settings_page_my-apps table thead th.move {
	width: 40px;
	overflow: hidden;
}

.settings_page_my-apps table thead th.plugin,
.settings_page_my-apps table tbody td.plugin {
	width: 20em;
}

@media screen and (max-width: 782px) {
	.settings_page_my-apps table thead th.plugin,
	.settings_page_my-apps table tbody td.plugin {
		display: none;
	}
}

.settings_page_my-apps table tr button {
	color: #999;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.settings_page_my-apps table tr:first-child button.move-up,
.settings_page_my-apps table tr:last-child button.move-down {
	visibility: hidden;
}

.settings_page_my-apps #edit-app {
	display: none;
}

/* Hidden Apps Button */
.hidden-btn {
	position: relative;
}

.hidden-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 9px;
	text-align: center;
	padding: 0 4px;
	display: none;
}

body.edit-mode .hidden-count {
	display: block;
}

/* Hidden Apps Popup */
.hidden-popup {
	position: fixed;
	top: 90px;
	left: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	display: none;
	z-index: 200;
	min-width: 240px;
	max-width: 320px;
	max-height: 400px;
	overflow: hidden;
}

.hidden-popup.active {
	display: block;
}

.hidden-popup-header {
	font-size: 14px;
	font-weight: 600;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
	color: #333;
}

.hidden-apps-list {
	max-height: 320px;
	overflow-y: auto;
}

.no-hidden-apps {
	padding: 24px 16px;
	text-align: center;
	color: #888;
	font-size: 14px;
}

.hidden-app-row {
	display: flex;
	align-items: stretch;
	transition: background 0.15s;
}

.hidden-app-row:hover {
	background: #f5f5f5;
}

.hidden-app-item {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	padding: 10px 16px;
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	gap: 12px;
}

.hidden-app-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: none;
	background: none;
	cursor: pointer;
	color: #bbb;
	transition: color 0.15s;
}

.hidden-app-row:hover .hidden-app-delete {
	color: #888;
}

.hidden-app-delete:hover {
	color: #e74c3c;
}

.hidden-app-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hidden-app-icon img {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.hidden-app-icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: #333;
}

.hidden-app-icon .emoji {
	font-size: 28px;
	line-height: 1;
}

.hidden-app-name {
	flex: 1;
	font-size: 14px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.restore-icon {
	color: #667eea;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.hidden-app-row:hover .restore-icon,
.hidden-app-item:hover .restore-icon {
	opacity: 1;
}

/* Admin Menu Tree */
.admin-menu-search {
	margin-bottom: 12px;
}

.admin-menu-search input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ma-border);
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	background: var(--ma-bg);
	color: var(--ma-fg);
}

.admin-menu-search input:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.admin-menu-tree {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--ma-border);
	border-radius: 8px;
	background: var(--ma-bg);
}

.admin-menu-loading {
	padding: 40px 20px;
	text-align: center;
	color: var(--ma-fg-muted);
}

.admin-menu-parent {
	border-bottom: 1px solid var(--ma-border-subtle);
}

.admin-menu-parent:last-child {
	border-bottom: none;
}

.admin-menu-parent-header {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	background: var(--ma-bg-tertiary);
	color: var(--ma-fg);
	transition: background 0.15s;
	gap: 10px;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 14px;
}

/* Block themes globally style button:hover; .admin-menu-parent-header
   is a <button>, so we need extra specificity to keep our subtle hover
   from being replaced with the theme's contrast-2 colour. */
body.my-apps-launcher .admin-menu-parent-header:hover {
	background: var(--ma-bg-secondary);
	color: var(--ma-fg);
}

body.my-apps-launcher .admin-menu-parent.expanded > .admin-menu-parent-header {
	background: var(--ma-hover-bg);
	color: var(--ma-fg);
}

.admin-menu-toggle {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s;
}

.admin-menu-toggle svg {
	width: 12px;
	height: 12px;
	fill: var(--ma-fg-secondary);
}

.admin-menu-parent.expanded > .admin-menu-parent-header .admin-menu-toggle {
	transform: rotate(90deg);
}

.admin-menu-parent.no-children > .admin-menu-parent-header .admin-menu-toggle {
	visibility: hidden;
}

.admin-menu-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.admin-menu-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: var(--ma-fg-secondary);
}

.admin-menu-icon img {
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

.admin-menu-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ma-fg);
}

.admin-menu-add {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #667eea;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
	flex-shrink: 0;
}

.admin-menu-parent-header:hover .admin-menu-add,
.admin-menu-item:hover .admin-menu-add {
	opacity: 1;
}

.admin-menu-add:hover {
	background: #5a6fd6;
}

.admin-menu-add.added {
	background: #10b981;
	opacity: 1;
}

.admin-menu-children {
	display: none;
	background: var(--ma-bg);
}

.admin-menu-parent.expanded > .admin-menu-children {
	display: block;
}

.admin-menu-item {
	display: flex;
	align-items: center;
	padding: 8px 12px 8px 46px;
	cursor: pointer;
	transition: background 0.15s;
	gap: 10px;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 13px;
	background: transparent;
}

body.my-apps-launcher .admin-menu-item:hover {
	background: var(--ma-bg-secondary);
	color: var(--ma-fg);
}

.admin-menu-item .admin-menu-name {
	font-size: 13px;
	color: var(--ma-fg-secondary);
}

.admin-menu-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--ma-fg-muted);
	font-size: 14px;
}

/* ── Recipes ── */

.recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
}

.recipe-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 18px;
	min-height: 180px;
	background: var(--ma-bg);
	border: 1px solid var(--ma-border);
	border-radius: 12px;
	color: var(--ma-fg);
	cursor: pointer;
	text-align: left;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	font-family: inherit;
	overflow: hidden;
	position: relative;
}

/* Block themes globally style button:hover with their preset colours
   (contrast-2 background, base text), which on our cards reads as a
   dark wash with white-on-white text. Pin both background and colour
   across all interaction states. */
body.my-apps-launcher .recipe-card:hover {
	background: var(--ma-bg);
	color: var(--ma-fg);
	border-color: light-dark(#cfcfcf, #50505a);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

body.my-apps-launcher .recipe-card:focus,
body.my-apps-launcher .recipe-card:active {
	background: var(--ma-bg);
	color: var(--ma-fg);
	outline: 2px solid #3858e9;
	outline-offset: -2px;
}

.recipe-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	margin-bottom: 14px;
	color: #fff;
}

.recipe-card-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 4px;
}

.recipe-card-tagline {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ma-fg-secondary);
	flex: 1;
}

.recipe-card-meta {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ma-fg-muted);
}

/* Recipe detail */

.recipe-hero {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	margin-bottom: 12px;
	color: var(--ma-fg);
}

.recipe-hero-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
	color: #fff;
}

.recipe-hero-text {
	flex: 1;
	min-width: 0;
}

.recipe-hero-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 2px;
}

.recipe-hero-tagline {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ma-fg-secondary);
}

.recipe-description {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ma-fg-secondary);
	margin: 0 0 24px;
}

.recipe-steps {
	list-style: none;
	counter-reset: recipe-step;
	margin: 0;
	padding: 0;
}

.recipe-step {
	counter-increment: recipe-step;
	position: relative;
	padding: 16px 0 16px 44px;
	border-bottom: 1px solid var(--ma-border-subtle);
}

.recipe-step:last-child {
	border-bottom: none;
}

.recipe-step::before {
	content: counter(recipe-step);
	position: absolute;
	left: 0;
	top: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #3858e9;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recipe-step-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ma-fg);
	margin: 0 0 6px;
	line-height: 1.3;
}

.recipe-step-optional::before {
	background: light-dark(#b8bcc4, #555558);
}

.recipe-step-optional-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 8px;
	background: var(--ma-button-bg);
	color: var(--ma-fg-muted);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	vertical-align: middle;
}

.recipe-step-description {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ma-fg-secondary);
	margin: 0 0 10px;
}

.recipe-step-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--ma-bg-tertiary);
	border: 1px solid var(--ma-border);
	border-radius: 10px;
	margin-top: 8px;
}

.recipe-step-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	overflow: hidden;
	background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}

.recipe-step-icon svg {
	width: 22px;
	height: 22px;
}

.recipe-step-card-plugin .recipe-step-icon {
	background: transparent;
}

.recipe-step-card-plugin .recipe-step-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recipe-step-info {
	flex: 1;
	min-width: 0;
}

.recipe-step-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--ma-fg);
	line-height: 1.3;
}

.recipe-step-card-author {
	font-size: 11px;
	color: var(--ma-fg-muted);
	margin-top: 2px;
}

.recipe-step-card-actions {
	flex-shrink: 0;
}

.recipe-step-actions {
	margin-top: 8px;
}

.recipe-step-link {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 14px;
	background: var(--ma-button-bg);
	color: #3858e9;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.12s;
}

.recipe-step-link:hover {
	background: var(--ma-button-bg-hover);
}

.recipe-step-pending {
	font-size: 12px;
	color: var(--ma-fg-muted);
	font-style: italic;
	margin-top: 8px;
}

.recipe-learn-more {
	margin: 24px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ma-border-subtle);
	text-align: center;
	font-size: 14px;
}

.recipe-learn-more a {
	color: #3858e9;
	text-decoration: none;
}

.recipe-learn-more a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.recipe-grid {
		grid-template-columns: 1fr;
	}
	.recipe-hero-title {
		font-size: 18px;
	}
}