.licenseflow-dashboard {
	--licenseflow-border: #d9dee7;
	--licenseflow-text: #172033;
	--licenseflow-muted: #667085;
	--licenseflow-accent: var(--e-global-color-secondary, #1463ff);
	--licenseflow-background: #ffffff;
	--licenseflow-sidebar-background: #ffffff;
	--licenseflow-sidebar-text: #1f2933;
	--licenseflow-sidebar-active-background: #e9e9eb;
	--licenseflow-heading: #172033;
	--licenseflow-row-background: #ffffff;
	--licenseflow-row-border: #dedede;
	--licenseflow-button-background: var(--licenseflow-accent);
	--licenseflow-button-text: #101418;
	--licenseflow-menu-background: #272727;
	--licenseflow-menu-text: #ffffff;
	--licenseflow-sidebar-width: 234px;
	--licenseflow-sidebar-padding-top: 42px;
	--licenseflow-sidebar-padding-x: 10px;
	--licenseflow-content-padding-top: 26px;
	--licenseflow-content-padding-x: 28px;
	--licenseflow-dashboard-min-height: 520px;
	--licenseflow-heading-size: 25px;
	--licenseflow-sidebar-font-size: 16px;
	--licenseflow-tab-font-size: 13px;
	--licenseflow-row-radius: 4px;
	--licenseflow-row-border-width: 1px;
	--licenseflow-row-padding-y: 14px;
	--licenseflow-row-padding-x: 14px;
	--licenseflow-row-gap: 18px;
	--licenseflow-row-hover-background: #fbfbfc;
	--licenseflow-favorite-width: 58px;
	--licenseflow-favorite-height: 42px;
	--licenseflow-favorite-radius: 8px;
	--licenseflow-favorite-icon-size: 18px;
	--licenseflow-favorite-active-background: #fff8e1;
	--licenseflow-favorite-active-border: #e7b008;
	--licenseflow-favorite-active-color: #b7791f;
	--licenseflow-action-trigger-size: 38px;
	--licenseflow-action-trigger-radius: 4px;
	--licenseflow-menu-width: 220px;
	--licenseflow-menu-radius: 4px;
	--licenseflow-menu-item-padding-y: 10px;
	--licenseflow-menu-item-padding-x: 10px;
	--licenseflow-menu-hover-background: rgba(255, 255, 255, 0.08);
	--licenseflow-button-radius: 4px;
	--licenseflow-button-padding-y: 12px;
	--licenseflow-button-padding-x: 18px;
	--licenseflow-button-hover-background: var(--licenseflow-button-background);
	--licenseflow-search-radius: 4px;
	--licenseflow-form-radius: 4px;
	--licenseflow-status-radius: 999px;
	--licenseflow-status-padding-y: 7px;
	--licenseflow-status-padding-x: 10px;
	--licenseflow-status-active-background: #e7f7ed;
	--licenseflow-status-active-text: #116236;
	--licenseflow-status-cancelled-background: #fde8e8;
	--licenseflow-status-cancelled-text: #9b1c1c;
	color: var(--licenseflow-text);
}

.licenseflow-workspace {
	background: var(--licenseflow-background);
	display: grid;
	grid-template-columns: minmax(160px, var(--licenseflow-sidebar-width)) minmax(0, 1fr);
	min-height: var(--licenseflow-dashboard-min-height);
	width: 100%;
}

.licenseflow-workspace-sidebar {
	background: var(--licenseflow-sidebar-background);
	border-right: 1px solid var(--licenseflow-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--licenseflow-sidebar-padding-top) var(--licenseflow-sidebar-padding-x) 0;
}

.licenseflow-workspace-sidebar button,
.licenseflow-workspace-sidebar a,
.licenseflow-toolbar-tabs button {
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: var(--licenseflow-sidebar-text);
	cursor: pointer;
	display: block;
	font-size: var(--licenseflow-sidebar-font-size);
	line-height: 1.2;
	padding: 11px 16px;
	text-align: left;
	text-decoration: none;
}

.licenseflow-workspace-sidebar button.is-active,
.licenseflow-toolbar-tabs button.is-active {
	background: var(--licenseflow-sidebar-active-background);
}

.licenseflow-sign-out {
	margin-top: auto;
}

.licenseflow-workspace-main {
	min-width: 0;
	padding: var(--licenseflow-content-padding-top) var(--licenseflow-content-padding-x) 28px;
}

.licenseflow-workspace-top {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 44px;
}

.licenseflow-workspace-top h2 {
	color: var(--licenseflow-heading);
	font-size: var(--licenseflow-heading-size);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
}

.licenseflow-add-button {
	background: var(--licenseflow-button-background) !important;
	border-radius: var(--licenseflow-button-radius) !important;
	color: var(--licenseflow-button-text) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: var(--licenseflow-button-padding-y) var(--licenseflow-button-padding-x) !important;
	text-decoration: none;
	white-space: nowrap;
}

.licenseflow-add-button:hover,
.licenseflow-button:hover {
	background: var(--licenseflow-button-hover-background) !important;
	color: var(--licenseflow-button-text) !important;
}

.licenseflow-toolbar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 22px;
}

.licenseflow-toolbar-tabs {
	display: flex;
	gap: 8px;
}

.licenseflow-toolbar-tabs button {
	font-size: var(--licenseflow-tab-font-size);
	padding: 9px 12px;
}

.licenseflow-search {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	min-width: 220px;
}

.licenseflow-search input {
	border: 1px solid transparent;
	border-radius: var(--licenseflow-search-radius);
	box-shadow: none;
	font-size: 14px;
	min-height: 38px;
	padding: 6px 8px;
	width: 100%;
}

.licenseflow-search input:focus {
	border-color: var(--licenseflow-border);
	outline: none;
}

.licenseflow-table-wrap {
	overflow: visible;
}

.licenseflow-table-head,
.licenseflow-site-row {
	display: grid;
	gap: var(--licenseflow-row-gap);
	grid-template-columns: minmax(280px, 1.25fr) minmax(130px, 0.55fr) minmax(180px, 0.8fr) minmax(130px, auto);
	min-width: 860px;
}

.licenseflow-has-key .licenseflow-table-head,
.licenseflow-has-key .licenseflow-site-row {
	grid-template-columns: minmax(260px, 1.15fr) minmax(120px, 0.45fr) minmax(170px, 0.65fr) minmax(220px, 0.85fr) minmax(130px, auto);
}

.licenseflow-table-head {
	border-bottom: 1px solid #eef0f3;
	color: var(--licenseflow-muted);
	font-size: 14px;
	font-weight: 700;
	padding: 0 90px 10px;
}

.licenseflow-site-row {
	align-items: center;
	background: var(--licenseflow-row-background);
	border: var(--licenseflow-row-border-width) solid var(--licenseflow-row-border);
	border-radius: var(--licenseflow-row-radius);
	margin: 14px 0;
	padding: var(--licenseflow-row-padding-y) var(--licenseflow-row-padding-x);
	position: relative;
}

.licenseflow-site-row:hover {
	background: var(--licenseflow-row-hover-background);
}

.licenseflow-site-row.licenseflow-is-filtered {
	display: none;
}

.licenseflow-site-name {
	align-items: center;
	display: flex;
	gap: 15px;
	min-width: 0;
}

.licenseflow-site-name strong,
.licenseflow-site-name a,
.licenseflow-site-name span {
	display: block;
	overflow-wrap: anywhere;
}

.licenseflow-site-name a,
.licenseflow-site-name span {
	color: var(--licenseflow-muted);
	font-size: 13px;
}

.licenseflow-site-thumb {
	align-items: center;
	background: #fafafa;
	border: 1px solid #dddddf;
	border-radius: var(--licenseflow-favorite-radius);
	display: inline-flex;
	flex: 0 0 var(--licenseflow-favorite-width);
	height: var(--licenseflow-favorite-height);
	justify-content: center;
	width: var(--licenseflow-favorite-width);
}

button.licenseflow-site-thumb {
	cursor: pointer;
	padding: 0;
}

.licenseflow-site-row.is-favorite .licenseflow-site-thumb {
	background: var(--licenseflow-favorite-active-background);
	border-color: var(--licenseflow-favorite-active-border);
	color: var(--licenseflow-favorite-active-color);
}

.licenseflow-favorite-toggle .dashicons {
	font-size: var(--licenseflow-favorite-icon-size);
	height: var(--licenseflow-favorite-icon-size);
	width: var(--licenseflow-favorite-icon-size);
}

.licenseflow-row-actions {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	position: relative;
}

.licenseflow-more {
	background: transparent;
	border: 0;
	color: #222;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	height: var(--licenseflow-action-trigger-size);
	line-height: 1;
	padding: 4px 7px;
	width: var(--licenseflow-action-trigger-size);
	border-radius: var(--licenseflow-action-trigger-radius);
}

.licenseflow-more:hover {
	background: var(--licenseflow-sidebar-active-background);
}

.licenseflow-action-menu {
	background: var(--licenseflow-menu-background);
	border-radius: var(--licenseflow-menu-radius);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
	display: none;
	min-width: var(--licenseflow-menu-width);
	padding: 8px;
	position: absolute;
	right: 0;
	top: 34px;
	z-index: 999;
}

.licenseflow-site-row.is-menu-open .licenseflow-action-menu {
	display: grid;
}

.licenseflow-action-menu a,
.licenseflow-action-menu button {
	background: transparent;
	border: 0;
	border-radius: 3px;
	color: var(--licenseflow-menu-text);
	cursor: pointer;
	font-size: 14px;
	padding: var(--licenseflow-menu-item-padding-y) var(--licenseflow-menu-item-padding-x);
	text-align: left;
	text-decoration: none;
}

.licenseflow-action-menu a:hover,
.licenseflow-action-menu button:hover {
	background: var(--licenseflow-menu-hover-background);
}

.licenseflow-inline-key {
	align-items: center;
	display: flex;
	gap: 8px;
	min-width: 0;
}

.licenseflow-inline-key code {
	overflow-wrap: anywhere;
}

.licenseflow-pagination {
	align-items: center;
	color: #1f2933;
	display: flex;
	gap: 32px;
	justify-content: flex-end;
	font-size: 14px;
	padding: 10px 0 0;
}

.licenseflow-dashboard-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.licenseflow-dashboard h2,
.licenseflow-dashboard h3,
.licenseflow-dashboard p {
	margin-top: 0;
}

.licenseflow-license-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.licenseflow-card {
	background: #fff;
	border: 1px solid var(--licenseflow-border);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
	display: grid;
	gap: 16px;
	padding: 20px;
	position: relative;
}

.licenseflow-card.is-loading {
	opacity: 0.68;
}

.licenseflow-card header {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.licenseflow-product {
	color: var(--licenseflow-muted);
	display: block;
	font-size: 13px;
	margin-bottom: 3px;
}

.licenseflow-status {
	border-radius: var(--licenseflow-status-radius);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: var(--licenseflow-status-padding-y) var(--licenseflow-status-padding-x);
	white-space: nowrap;
}

.licenseflow-status-active,
.licenseflow-status-grace_period {
	background: var(--licenseflow-status-active-background);
	color: var(--licenseflow-status-active-text);
}

.licenseflow-status-expired,
.licenseflow-status-cancelled,
.licenseflow-status-revoked {
	background: var(--licenseflow-status-cancelled-background);
	color: var(--licenseflow-status-cancelled-text);
}

.licenseflow-status-trialing {
	background: #e0e7ff;
	color: #3730a3;
}

.licenseflow-key-row {
	align-items: center;
	background: #f7f8fb;
	border: 1px solid var(--licenseflow-border);
	border-radius: 8px;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 10px;
}

.licenseflow-key-row code {
	background: transparent;
	overflow-wrap: anywhere;
}

.licenseflow-meta {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.licenseflow-meta div {
	border-bottom: 1px solid #edf0f5;
	padding-bottom: 8px;
}

.licenseflow-meta dt {
	color: var(--licenseflow-muted);
	font-size: 12px;
}

.licenseflow-meta dd {
	font-weight: 700;
	margin: 2px 0 0;
}

.licenseflow-sites {
	border-top: 1px solid #edf0f5;
	display: grid;
	gap: 8px;
	padding-top: 12px;
}

.licenseflow-sites div {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.licenseflow-sites span {
	overflow-wrap: anywhere;
}

.licenseflow-card footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.licenseflow-button,
.licenseflow-card button {
	background: var(--licenseflow-button-background) !important;
	border: 0;
	border-radius: var(--licenseflow-button-radius) !important;
	color: var(--licenseflow-button-text) !important;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: var(--licenseflow-button-padding-y) var(--licenseflow-button-padding-x) !important;
	text-decoration: none;
}

.licenseflow-button.secondary,
.licenseflow-deactivate-site,
.licenseflow-copy {
	background: #eef3ff;
	color: #174ea6;
}

.licenseflow-cancel {
	background: #b42318;
}

.licenseflow-message {
	color: var(--licenseflow-muted);
	font-size: 13px;
	min-height: 18px;
}

.licenseflow-message[data-type="success"] {
	color: #14713d;
}

.licenseflow-message[data-type="error"] {
	color: #b42318;
}

.licenseflow-empty {
	background: var(--licenseflow-row-background);
	border: 1px dashed var(--licenseflow-border);
	border-radius: 8px;
	padding: 28px;
	text-align: center;
}

.licenseflow-section {
	display: none;
}

.licenseflow-section.is-active {
	display: block;
}

.licenseflow-invoice-list {
	display: grid;
	gap: 14px;
}

.licenseflow-invoice-row {
	align-items: center;
	background: var(--licenseflow-row-background);
	border: var(--licenseflow-row-border-width) solid var(--licenseflow-row-border);
	border-radius: var(--licenseflow-row-radius);
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(220px, 1fr) auto auto;
	padding: 16px;
}

.licenseflow-invoice-row strong,
.licenseflow-invoice-row span {
	display: block;
}

.licenseflow-invoice-row span {
	color: var(--licenseflow-muted);
	font-size: 13px;
}

.licenseflow-profile-form {
	background: var(--licenseflow-row-background);
	border: var(--licenseflow-row-border-width) solid var(--licenseflow-row-border);
	border-radius: var(--licenseflow-form-radius);
	display: grid;
	gap: 16px;
	max-width: 680px;
	padding: 20px;
}

.licenseflow-profile-form label {
	display: grid;
	gap: 7px;
}

.licenseflow-profile-form label span {
	color: var(--licenseflow-muted);
	font-size: 13px;
	font-weight: 700;
}

.licenseflow-profile-form input {
	border: 1px solid var(--licenseflow-border);
	border-radius: var(--licenseflow-form-radius);
	min-height: 42px;
	padding: 8px 10px;
}

@media (max-width: 600px) {
	.licenseflow-workspace {
		grid-template-columns: 1fr;
	}

	.licenseflow-workspace-sidebar {
		border-bottom: 1px solid var(--licenseflow-border);
		border-right: 0;
		padding: 12px;
	}

	.licenseflow-workspace-main {
		padding: 18px 14px;
	}

	.licenseflow-table-wrap {
		overflow-x: auto;
	}

	.licenseflow-workspace-top,
	.licenseflow-toolbar,
	.licenseflow-invoice-row {
		align-items: stretch;
		flex-direction: column;
	}

	.licenseflow-invoice-row {
		display: grid;
		grid-template-columns: 1fr;
	}

	.licenseflow-card header,
	.licenseflow-sites div {
		align-items: stretch;
		flex-direction: column;
	}

	.licenseflow-meta {
		grid-template-columns: 1fr;
	}
}

/* State-specific notes and detailed site management. */
.licenseflow-status-note {
	display: block;
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
	margin-top: 4px;
}

.licenseflow-status-row-grace_period .licenseflow-status-note,
.licenseflow-status-row-on_hold .licenseflow-status-note,
.licenseflow-status-row-expired .licenseflow-status-note,
.licenseflow-status-row-revoked .licenseflow-status-note {
	color: #9b1c1c;
}

.licenseflow-status-row-trialing .licenseflow-status-note {
	color: #3730a3;
}

.licenseflow-status-pending_cancel,
.licenseflow-status-on_hold,
.licenseflow-status-grace_period {
	background: #fff4e5;
	color: #92400e;
}

.licenseflow-status-expired,
.licenseflow-status-revoked {
	background: var(--licenseflow-status-cancelled-background, #fde8e8);
	color: var(--licenseflow-status-cancelled-text, #9b1c1c);
}

.licenseflow-site-manager {
	margin-top: 12px;
	border: 1px solid var(--licenseflow-row-border, #dedede);
	border-radius: var(--licenseflow-row-radius, 4px);
	padding: 12px 14px;
	background: var(--licenseflow-row-hover-background, #fbfbfc);
	width: 100%;
}

.licenseflow-site-manager header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	gap: 10px;
}

.licenseflow-site-manager header span {
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
}

.licenseflow-site-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.licenseflow-site-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.licenseflow-site-list .licenseflow-site-url {
	font-weight: 600;
	word-break: break-all;
}

.licenseflow-site-list .licenseflow-site-seen {
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
	margin-left: auto;
}

.licenseflow-site-empty {
	font-size: 13px;
	color: var(--licenseflow-muted, #667085);
	margin: 0;
}

.licenseflow-switch-panel {
	margin-top: 12px;
	border: 1px solid var(--licenseflow-row-border, #dedede);
	border-radius: var(--licenseflow-row-radius, 4px);
	padding: 12px 14px;
	background: var(--licenseflow-row-hover-background, #fbfbfc);
	width: 100%;
}

/* ====================================================================== */
/* Action popup (Manage Sites / Manage Subscription)                      */
/* ====================================================================== */
.licenseflow-modal-overlay {
	align-items: center;
	background: var(--licenseflow-modal-overlay, rgba(15, 20, 27, 0.55));
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 100001;
}

.licenseflow-modal {
	background: var(--licenseflow-modal-background, #ffffff);
	border: 1px solid var(--licenseflow-modal-border, #e2e6ee);
	border-radius: var(--licenseflow-modal-radius, 12px);
	box-shadow: var(--licenseflow-modal-shadow, 0 24px 70px rgba(0, 0, 0, 0.28));
	max-height: 86vh;
	max-width: var(--licenseflow-modal-width, 560px);
	overflow: auto;
	padding: var(--licenseflow-modal-padding, 26px);
	position: relative;
	width: 100%;
}

.licenseflow-modal__close {
	background: transparent;
	border: 0;
	color: var(--licenseflow-modal-close, #667085);
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	position: absolute;
	right: 14px;
	top: 8px;
}

.licenseflow-modal__panel-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 0 24px 14px 0;
}

.licenseflow-modal__panel-head strong {
	color: var(--licenseflow-modal-title, var(--licenseflow-heading, #172033));
	font-size: var(--licenseflow-modal-title-size, 17px);
}

/* Inside the popup the panel is just content — the modal box provides the
   border / background / padding, so neutralise the inline-dropdown chrome. */
.licenseflow-modal .licenseflow-site-manager,
.licenseflow-modal .licenseflow-switch-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.licenseflow-switch-panel header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	gap: 10px;
}

.licenseflow-switch-panel header span {
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
}

.licenseflow-switch-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.licenseflow-switch-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.licenseflow-switch-meta strong {
	display: block;
}

.licenseflow-switch-meta span {
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
}

.licenseflow-switch-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
}

.licenseflow-switch-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--licenseflow-muted, #667085);
}

.licenseflow-dashboard__license-fields {
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

.licenseflow-dashboard__form-note {
	color: var(--licenseflow-muted, #667085);
	font-size: 13px;
	margin: 4px 0 0;
}

.licenseflow-pw-field {
	align-items: center;
	display: flex;
	gap: 6px;
	position: relative;
}

.licenseflow-pw-field input {
	flex: 1 1 auto;
	padding-right: 40px;
	width: 100%;
}

.licenseflow-pw-toggle {
	background: transparent;
	border: 0;
	color: var(--licenseflow-muted, #667085);
	cursor: pointer;
	padding: 4px;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

.licenseflow-pw-toggle:hover {
	color: var(--licenseflow-text, #172033);
}

.licenseflow-dashboard__license-field {
	color: var(--licenseflow-muted, #667085);
	display: inline-block;
	margin-right: 12px;
}

/* ====================================================================== */
/* Builder additions: variable defaults, per-state colors, icons, layout */
/* ====================================================================== */
.licenseflow-dashboard {
	--licenseflow-content-bg: transparent;
	--licenseflow-dashboard-max-width: 100%;
	--licenseflow-icon-size: 1em;
	--licenseflow-icon-gap: 8px;
	--licenseflow-icon-color: currentColor;
	--licenseflow-icon-hover: var(--licenseflow-accent);
	--licenseflow-sidebar-hover-background: transparent;
	--licenseflow-sidebar-hover-text: var(--licenseflow-sidebar-text);
	--licenseflow-sidebar-active-text: var(--licenseflow-sidebar-text);
	--licenseflow-button-hover-text: var(--licenseflow-button-text);
	--licenseflow-menu-hover-text: var(--licenseflow-menu-text);
	max-width: var(--licenseflow-dashboard-max-width);
}

.licenseflow-workspace-main {
	background: var(--licenseflow-content-bg);
}

/* Sidebar / tab item states */
.licenseflow-workspace-sidebar button:hover,
.licenseflow-workspace-sidebar a:hover,
.licenseflow-toolbar-tabs button:hover {
	background: var(--licenseflow-sidebar-hover-background);
	color: var(--licenseflow-sidebar-hover-text);
}

.licenseflow-workspace-sidebar button.is-active,
.licenseflow-toolbar-tabs button.is-active {
	background: var(--licenseflow-sidebar-active-background);
	color: var(--licenseflow-sidebar-active-text);
}

/* Button hover text */
.licenseflow-add-button:hover,
.licenseflow-button:hover {
	color: var(--licenseflow-button-hover-text) !important;
}

/* Action menu hover text */
.licenseflow-action-menu a:hover,
.licenseflow-action-menu button:hover {
	color: var(--licenseflow-menu-hover-text);
}

/* Icon + label alignment */
.licenseflow-workspace-sidebar .licenseflow-dashboard__nav-item,
.licenseflow-workspace-sidebar .licenseflow-dashboard__sign-out {
	align-items: center;
	display: flex;
	gap: var(--licenseflow-icon-gap);
}

.licenseflow-action-menu a,
.licenseflow-action-menu button,
.licenseflow-toolbar-tabs button {
	align-items: center;
	display: inline-flex;
	gap: var(--licenseflow-icon-gap);
}

.licenseflow-add-button {
	align-items: center;
	display: inline-flex;
	gap: var(--licenseflow-icon-gap);
}

/* Icon sizing + color */
.licenseflow-dashboard i,
.licenseflow-dashboard svg {
	color: var(--licenseflow-icon-color);
	fill: var(--licenseflow-icon-color);
	font-size: var(--licenseflow-icon-size);
	height: var(--licenseflow-icon-size);
	width: var(--licenseflow-icon-size);
	vertical-align: middle;
}

.licenseflow-dashboard__nav-item:hover i,
.licenseflow-dashboard__nav-item:hover svg,
.licenseflow-action-menu a:hover i,
.licenseflow-action-menu a:hover svg,
.licenseflow-action-menu button:hover i,
.licenseflow-action-menu button:hover svg {
	color: var(--licenseflow-icon-hover);
	fill: var(--licenseflow-icon-hover);
}

.licenseflow-dashboard__nav-count {
	margin-left: auto;
	opacity: 0.7;
}

/* Sidebar position: right */
.licenseflow-workspace[data-sidebar-position="right"] {
	grid-template-columns: minmax(0, 1fr) minmax(160px, var(--licenseflow-sidebar-width));
}

.licenseflow-workspace[data-sidebar-position="right"] .licenseflow-workspace-sidebar {
	border-left: 1px solid var(--licenseflow-border);
	border-right: 0;
	order: 2;
}

/* Sidebar position: top */
.licenseflow-workspace[data-sidebar-position="top"] {
	display: flex;
	flex-direction: column;
}

.licenseflow-workspace[data-sidebar-position="top"] .licenseflow-workspace-sidebar {
	align-items: center;
	border-bottom: 1px solid var(--licenseflow-border);
	border-right: 0;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	padding: var(--licenseflow-sidebar-padding-x);
}

.licenseflow-workspace[data-sidebar-position="top"] .licenseflow-dashboard__nav-item {
	flex: 0 0 auto;
}

.licenseflow-workspace[data-sidebar-position="top"] .licenseflow-sign-out {
	margin-left: auto;
	margin-top: 0;
}

/* Mobile: stack the sidebar to the top */
@media (max-width: 767px) {
	.licenseflow-workspace[data-sidebar-position-mobile="top"] {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
	}

	.licenseflow-workspace[data-sidebar-position-mobile="top"] .licenseflow-workspace-sidebar {
		align-items: center;
		border-bottom: 1px solid var(--licenseflow-border);
		border-right: 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.licenseflow-workspace[data-sidebar-position-mobile="top"] .licenseflow-sign-out {
		margin-left: auto;
		margin-top: 0;
	}
}

/* ====================================================================== */
/* Login / Register (logged-out) form                                     */
/* ====================================================================== */
.licenseflow-dashboard--auth {
	--licenseflow-auth-bg: #ffffff;
	--licenseflow-auth-padding: 28px;
	--licenseflow-auth-radius: var(--licenseflow-row-radius, 8px);
	--licenseflow-auth-border: var(--licenseflow-border, #d9dee7);
	--licenseflow-auth-title: var(--licenseflow-heading, #172033);
	--licenseflow-auth-label: var(--licenseflow-text, #172033);
	--licenseflow-auth-link: var(--licenseflow-accent, #1463ff);
	--licenseflow-auth-input-bg: #ffffff;
	--licenseflow-auth-input-text: var(--licenseflow-text, #172033);
	--licenseflow-auth-input-border: var(--licenseflow-row-border, #cfd6e4);
	--licenseflow-auth-input-focus: var(--licenseflow-accent, #1463ff);
	--licenseflow-auth-input-radius: 6px;
	--licenseflow-auth-btn-bg: var(--licenseflow-button-background);
	--licenseflow-auth-btn-text: var(--licenseflow-button-text, #ffffff);
	--licenseflow-auth-btn-bg-hover: var(--licenseflow-button-hover-background);
	--licenseflow-auth-btn-text-hover: var(--licenseflow-button-text, #ffffff);
	--licenseflow-auth-btn-radius: var(--licenseflow-button-radius, 6px);

	background: var(--licenseflow-background, transparent);
	padding: 16px;
}

.licenseflow-auth {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.licenseflow-auth__col {
	flex: 1 1 280px;
	min-width: 0;
}

.licenseflow-auth__form {
	background: var(--licenseflow-auth-bg);
	border: 1px solid var(--licenseflow-auth-border);
	border-radius: var(--licenseflow-auth-radius);
	height: 100%;
	padding: var(--licenseflow-auth-padding);
}

.licenseflow-auth__title {
	color: var(--licenseflow-auth-title);
	margin: 0 0 16px;
}

.licenseflow-auth__row {
	display: block;
	margin: 0 0 14px;
}

.licenseflow-auth__row label {
	color: var(--licenseflow-auth-label);
	display: block;
	margin-bottom: 6px;
}

.licenseflow-auth__form .input-text,
.licenseflow-auth__form input[type="text"],
.licenseflow-auth__form input[type="email"],
.licenseflow-auth__form input[type="password"] {
	background: var(--licenseflow-auth-input-bg);
	border: 1px solid var(--licenseflow-auth-input-border);
	border-radius: var(--licenseflow-auth-input-radius);
	color: var(--licenseflow-auth-input-text);
	min-height: 44px;
	padding: 10px 12px;
	width: 100%;
}

.licenseflow-auth__form .input-text:focus,
.licenseflow-auth__form input:focus {
	border-color: var(--licenseflow-auth-input-focus);
	box-shadow: 0 0 0 3px rgba(20, 99, 255, 0.12);
	outline: none;
}

.licenseflow-auth__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.licenseflow-auth__remember {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.licenseflow-auth__submit {
	background: var(--licenseflow-auth-btn-bg) !important;
	border: 0;
	border-radius: var(--licenseflow-auth-btn-radius);
	color: var(--licenseflow-auth-btn-text) !important;
	cursor: pointer;
	padding: 12px 20px;
}

.licenseflow-auth__submit:hover {
	background: var(--licenseflow-auth-btn-bg-hover) !important;
	color: var(--licenseflow-auth-btn-text-hover) !important;
}

.licenseflow-auth__lost {
	margin: 12px 0 0;
}

.licenseflow-auth a,
.licenseflow-auth__lost a {
	color: var(--licenseflow-auth-link);
}

@media (max-width: 600px) {
	.licenseflow-auth {
		flex-direction: column;
	}
}

.licenseflow-auth__turnstile {
	margin: 4px 0 14px;
}

/* Ensure the [hidden] attribute wins over theme/grid display rules
   (e.g. .button{display:inline-block} or .form-row{display:block}), so the
   multi-step register code field stays hidden until revealed. */
.licenseflow-dashboard [hidden] {
	display: none !important;
}

/* Login / Register toggle (one form at a time) */
.licenseflow-auth--toggle .licenseflow-auth__col {
	flex: 1 1 100%;
}

.licenseflow-auth--toggle.is-login .licenseflow-auth__col--register,
.licenseflow-auth--toggle.is-register .licenseflow-auth__col--login {
	display: none;
}

/* ---- Login widget layouts ---- */
/* Stacked */
.licenseflow-auth--layout-column {
	flex-direction: column;
}

.licenseflow-auth--layout-column .licenseflow-auth__col,
.licenseflow-auth--layout-login .licenseflow-auth__col,
.licenseflow-auth--layout-register .licenseflow-auth__col {
	flex: 1 1 100%;
}

/* In-form switch links only make sense in the one-at-a-time toggle; the
   side-by-side / stacked / tab layouts provide their own navigation. */
.licenseflow-auth:not(.licenseflow-auth--toggle) .licenseflow-auth__switch,
.licenseflow-auth--layout-tabs .licenseflow-auth__switch {
	display: none;
}

/* Tabs nav */
.licenseflow-auth__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.licenseflow-auth__tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--licenseflow-auth-label, #475467);
	cursor: pointer;
	font-weight: 600;
	padding: 10px 16px;
}

.licenseflow-auth__tab.is-active {
	border-bottom-color: var(--licenseflow-auth-btn-bg, var(--licenseflow-accent, #1463ff));
	color: var(--licenseflow-auth-title, #172033);
}

/* Login widget: signed-in notice */
.licenseflow-login--signed-in .licenseflow-auth__form {
	text-align: center;
}

.licenseflow-login__signed-in-text {
	margin: 0 0 14px;
}

.licenseflow-auth__switch {
	font-size: 14px;
	margin: 14px 0 0;
}

.licenseflow-reg-code-hint {
	color: var(--licenseflow-muted, #667085);
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

.licenseflow-reg-resend {
	background: transparent;
	border: 0;
	color: var(--licenseflow-auth-link, var(--licenseflow-accent, #1463ff));
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.licenseflow-auth__message[data-type="error"] {
	color: var(--licenseflow-status-cancelled-text, #9b1c1c);
}

.licenseflow-auth__message[data-type="success"] {
	color: var(--licenseflow-status-active-text, #116236);
}

/* Payment Methods (Dashboard -> Invoices) */
.licenseflow-payment-methods { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.licenseflow-payment-methods__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.licenseflow-payment-methods__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; flex-wrap: wrap; }
.licenseflow-payment-methods__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.licenseflow-payment-methods__brand { font-weight: 600; }
.licenseflow-payment-methods__expiry,
.licenseflow-payment-methods__gateway { color: #6b7280; font-size: 13px; }
.licenseflow-payment-methods__default-badge { background: #e7f6ec; color: #227a22; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.licenseflow-payment-methods__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.licenseflow-notice { padding: 10px 12px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 13px; margin: 10px 0; }

/* --- Cancellation reason prompt --------------------------------------- */
/* Rendered hidden inside the license card and moved into the shared modal
   when the customer clicks Cancel Subscription. Uses the dashboard's own
   design tokens so it inherits any theming applied to the dashboard. */

.licenseflow-cancel-reason {
	max-width: 460px;
	color: var(--licenseflow-text);
	text-align: left;
}

.licenseflow-cancel-reason__title {
	margin: 0 0 6px;
	color: var(--licenseflow-heading);
	font-size: 18px;
	line-height: 1.3;
}

.licenseflow-cancel-reason__intro {
	margin: 0 0 16px;
	color: var(--licenseflow-muted);
	font-size: 14px;
	line-height: 1.55;
}

.licenseflow-cancel-reason__options {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.licenseflow-cancel-reason__options li {
	margin: 0;
}

.licenseflow-cancel-reason__options label {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px 12px;
	border: 1px solid var(--licenseflow-border);
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
}

.licenseflow-cancel-reason__options label:hover,
.licenseflow-cancel-reason__options label:focus-within {
	border-color: var(--licenseflow-accent);
}

.licenseflow-cancel-reason__options input {
	margin: 0;
	flex: 0 0 auto;
}

.licenseflow-cancel-reason__note {
	display: block;
	margin: 0 0 18px;
}

.licenseflow-cancel-reason__note > span {
	display: block;
	margin-bottom: 6px;
	color: var(--licenseflow-muted);
	font-size: 13px;
}

.licenseflow-cancel-reason__note textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--licenseflow-border);
	border-radius: 6px;
	font: inherit;
	font-size: 14px;
	resize: vertical;
}

.licenseflow-cancel-reason__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.licenseflow-cancel-reason__skip,
.licenseflow-cancel-reason__confirm {
	padding: 9px 18px;
	border-radius: 6px;
	border: 1px solid var(--licenseflow-border);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.licenseflow-cancel-reason__skip {
	background: transparent;
	color: var(--licenseflow-muted);
}

.licenseflow-cancel-reason__confirm {
	background: var(--licenseflow-button-background);
	border-color: var(--licenseflow-button-background);
	color: var(--licenseflow-button-text);
	font-weight: 600;
}

.licenseflow-cancel-reason__skip:hover,
.licenseflow-cancel-reason__confirm:hover {
	opacity: .88;
}