/**
 * UseClick.io admin styles.
 *
 * The useClick.io dashboard look (cards, chips, stat tiles, ink type, monospace short links)
 * inside wp-admin, while WordPress buttons, form controls and link colours stay native so the
 * user's admin colour scheme is respected.
 */

.useclick-wrap,
.useclick-postbox,
.useclick-col,
.useclick-modal {
	--uc-ink: #1d1d1f;
	--uc-ink-2: #3f3f46;
	--uc-muted: #5f5f67;
	--uc-subtle: #6e6e76;
	--uc-faint: #86868d;
	--uc-line: #e8e8eb;
	--uc-line-soft: #efeff1;
	--uc-canvas: #f6f6f7;
	--uc-fill: #f3f3f5;
	--uc-surface: #fff;
	--uc-brand: #6f42d7;
	--uc-brand-tint: #f1ecfc;
	--uc-positive: #15803d;
	--uc-positive-bg: #e6f6ec;
	--uc-positive-line: #bfe6cc;
	--uc-warning: #8a5a12;
	--uc-warning-bg: #fbf4e7;
	--uc-warning-line: #efd9ad;
	--uc-danger: #b42318;
	--uc-danger-bg: #fdeceb;
	--uc-danger-line: #f4c7c3;
	--uc-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 1px rgba(24, 24, 27, 0.02);
	--uc-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--uc-radius: 14px;
}

.useclick-wrap {
	max-width: 1240px;
	color: var(--uc-ink-2);
}

.useclick-wrap h1,
.useclick-wrap h2,
.useclick-wrap h3 {
	color: var(--uc-ink);
}

/* ---------------------------------------------------------------- header */

.useclick-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 14px 0 22px;
}

.useclick-header-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.useclick-logo-tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--uc-line);
	border-radius: 11px;
	background: var(--uc-surface);
	box-shadow: var(--uc-shadow);
}

.useclick-logo {
	flex: none;
}

.useclick-header-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.useclick-header-name {
	color: var(--uc-subtle);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.useclick-header-sep {
	display: none;
}

.useclick-wrap .useclick-header-title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Status chip (also used as a link to Settings) */
.useclick-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--uc-line);
	border-radius: 999px;
	background: var(--uc-surface);
	color: var(--uc-ink-2);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: var(--uc-shadow);
}

.useclick-status:hover,
.useclick-status:focus {
	border-color: #d4d4d8;
	color: var(--uc-ink);
}

.useclick-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--uc-faint);
}

.useclick-status--ok {
	border-color: var(--uc-positive-line);
	background: var(--uc-positive-bg);
	color: var(--uc-positive);
}

.useclick-status--ok .useclick-status-dot {
	background: var(--uc-positive);
}

.useclick-status--warn {
	border-color: var(--uc-warning-line);
	background: var(--uc-warning-bg);
	color: var(--uc-warning);
}

.useclick-status--warn .useclick-status-dot {
	background: #c47f12;
}

.useclick-status--error {
	border-color: var(--uc-danger-line);
	background: var(--uc-danger-bg);
	color: var(--uc-danger);
}

.useclick-status--error .useclick-status-dot {
	background: var(--uc-danger);
}

/* ---------------------------------------------------------------- layout */

.useclick-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 1100px) {
	.useclick-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.useclick-card {
	margin: 0 0 20px;
	padding: 22px 24px;
	border: 1px solid var(--uc-line);
	border-radius: var(--uc-radius);
	background: var(--uc-surface);
	box-shadow: var(--uc-shadow);
}

.useclick-card h2 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.useclick-card h2 + p,
.useclick-card h2 + .description {
	margin-top: -8px;
}

.useclick-card h3 {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 600;
}

.useclick-card p {
	color: var(--uc-muted);
}

.useclick-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.useclick-card-head h2 {
	margin: 0;
}

.useclick-card .form-table th {
	padding-left: 0;
	color: var(--uc-ink);
	font-weight: 500;
}

.useclick-empty-state {
	max-width: 640px;
}

.useclick-muted {
	color: var(--uc-subtle);
}

/* Stat tiles (plan, links, analytics) */
.useclick-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.useclick-stat {
	padding: 14px 18px;
	border: 1px solid var(--uc-line);
	border-radius: 12px;
	background: var(--uc-surface);
	box-shadow: var(--uc-shadow);
}

.useclick-stat-label {
	display: block;
	margin-bottom: 4px;
	color: var(--uc-subtle);
	font-size: 12px;
}

.useclick-stat-value {
	display: block;
	color: var(--uc-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.useclick-stat-note {
	display: block;
	margin-top: 4px;
	color: var(--uc-faint);
	font-size: 12px;
}

/* ---------------------------------------------------------------- forms */

.useclick-field {
	margin: 0 0 18px;
}

.useclick-label {
	display: block;
	margin: 0 0 6px;
	color: var(--uc-ink);
	font-weight: 500;
}

.useclick-label code {
	margin-left: 4px;
	font-size: 11px;
	font-weight: 400;
}

.useclick-required {
	color: var(--uc-danger);
}

.useclick-field input[type="text"],
.useclick-field input[type="url"] {
	width: 100%;
	max-width: 100%;
}

.useclick-field .regular-text {
	max-width: 25em;
}

.useclick-slug-row {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 560px;
}

.useclick-slug-row select {
	flex: 0 1 auto;
	max-width: 50%;
}

.useclick-slug-row input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--uc-mono);
}

.useclick-slash {
	color: var(--uc-faint);
	font-size: 16px;
}

.useclick-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

@media (max-width: 782px) {
	.useclick-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.useclick-section {
	margin: 0 0 12px;
	border: 1px solid var(--uc-line);
	border-radius: 10px;
	background: var(--uc-surface);
}

.useclick-section > summary {
	padding: 12px 16px;
	color: var(--uc-ink);
	font-weight: 500;
	list-style-position: inside;
	cursor: pointer;
}

.useclick-section > summary:hover {
	background: var(--uc-canvas);
	border-radius: 10px;
}

.useclick-section[open] > summary {
	border-bottom: 1px solid var(--uc-line-soft);
	border-radius: 10px 10px 0 0;
}

.useclick-section-body {
	padding: 14px 16px;
}

.useclick-section-body > .description:first-child {
	margin-top: 0;
}

.useclick-fieldset {
	margin: 0 0 12px;
	padding: 6px 14px 0;
	border: 1px solid var(--uc-line);
	border-radius: 10px;
}

.useclick-fieldset legend {
	padding: 0 4px;
	color: var(--uc-ink);
	font-weight: 500;
}

.useclick-form-actions {
	margin-top: 22px;
}

.useclick-wrap .button-hero {
	min-height: 40px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 2.7;
}

.useclick-invalid {
	border-color: var(--uc-danger) !important;
	box-shadow: 0 0 0 1px var(--uc-danger) !important;
}

/* Plan-locked sections: the badge text comes from data-useclick-lock-label (translated). */
.useclick-locked > summary,
.useclick-locked > .useclick-label,
.useclick-locked > legend {
	color: var(--uc-subtle);
}

.useclick-locked > summary[data-useclick-lock-label]::after,
.useclick-locked > .useclick-label[data-useclick-lock-label]::after,
.useclick-locked > legend[data-useclick-lock-label]::after {
	content: attr(data-useclick-lock-label);
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--uc-brand-tint);
	color: var(--uc-brand);
	font-size: 11px;
	font-weight: 600;
	vertical-align: 1px;
}

.useclick-lock-hint {
	margin: 6px 0 10px;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--uc-brand-tint);
	color: var(--uc-ink-2);
}

/* Geo rows */
.useclick-geo-row {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.useclick-geo-remove {
	color: var(--uc-danger);
	text-decoration: none;
}

@media (max-width: 782px) {
	.useclick-geo-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.useclick-geo-url {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* ---------------------------------------------------------------- results */

.useclick-success {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid var(--uc-positive-line);
	border-radius: 12px;
	background: var(--uc-positive-bg);
}

.useclick-success-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	color: var(--uc-positive);
	font-weight: 600;
}

.useclick-success-title .dashicons {
	color: var(--uc-positive);
}

.useclick-result-url {
	display: flex;
	gap: 8px;
	max-width: 560px;
}

.useclick-result-url input {
	flex: 1;
	background: var(--uc-surface);
	font-family: var(--uc-mono);
	font-size: 15px;
}

.useclick-success-meta {
	margin: 10px 0 0;
	color: var(--uc-muted);
	word-break: break-all;
}

.useclick-notice {
	margin: 14px 0 0 !important;
}

.useclick-toast {
	margin: 0 0 14px !important;
}

/* ---------------------------------------------------------------- plan card */

.useclick-plan-name {
	margin-bottom: 14px;
	color: var(--uc-ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.useclick-usage-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	color: var(--uc-subtle);
}

.useclick-usage-label span:last-child {
	color: var(--uc-ink);
	font-family: var(--uc-mono);
	font-weight: 600;
}

.useclick-usage-bar {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--uc-fill);
}

.useclick-usage-fill {
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--uc-ink);
	transition: width 0.3s ease;
}

.useclick-usage-fill.is-high {
	background: var(--uc-danger);
}

.useclick-limit-note {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--uc-danger-bg);
	color: var(--uc-danger);
}

.useclick-upgrade-note {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--uc-brand-tint);
}

.useclick-link-list,
.useclick-steps {
	margin: 0 0 0 18px;
}

.useclick-link-list {
	list-style: disc;
}

.useclick-link-list li,
.useclick-steps li {
	margin-bottom: 6px;
}

/* ---------------------------------------------------------------- links list */

.useclick-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.useclick-toolbar-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.useclick-table-card {
	overflow: hidden;
	padding: 0;
}

.useclick-wrap .useclick-links-table {
	table-layout: fixed;
	border: 0;
	box-shadow: none;
}

.useclick-wrap .useclick-links-table thead th {
	padding-top: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--uc-line-soft);
	color: var(--uc-subtle);
	font-family: var(--uc-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.useclick-wrap .useclick-links-table td {
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--uc-line-soft);
	vertical-align: middle;
}

.useclick-wrap .useclick-links-table tbody tr:last-child td {
	border-bottom: 0;
}

.useclick-wrap .useclick-links-table.striped > tbody > :nth-child(odd) {
	background: var(--uc-surface);
}

.useclick-wrap .useclick-links-table tbody tr:hover {
	background: #fafafa;
}

.useclick-links-table .column-short {
	width: 22%;
}

.useclick-links-table .column-short,
.useclick-links-table .column-campaign {
	overflow: hidden;
	text-overflow: ellipsis;
}

.useclick-links-table .column-campaign {
	width: 12%;
}

.useclick-links-table .column-clicks {
	width: 8%;
	text-align: right;
}

.useclick-links-table .column-created {
	width: 10%;
}

.useclick-links-table .column-actions {
	width: 250px;
	white-space: nowrap;
	text-align: right;
}

.useclick-links-table .useclick-short {
	color: var(--uc-ink);
	font-family: var(--uc-mono);
	font-weight: 600;
	text-decoration: none;
}

.useclick-links-table .useclick-short:hover,
.useclick-links-table .useclick-short:focus {
	text-decoration: underline;
}

.useclick-links-table .useclick-target {
	display: block;
	overflow: hidden;
	color: var(--uc-muted);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.useclick-links-table .useclick-target:hover {
	color: var(--uc-ink);
	text-decoration: underline;
}

.useclick-links-table .column-clicks strong {
	color: var(--uc-ink);
	font-family: var(--uc-mono);
}

.useclick-row-title {
	margin-top: 2px;
	color: var(--uc-subtle);
	font-size: 12px;
}

.useclick-tag {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--uc-fill);
	color: var(--uc-ink-2);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.useclick-empty {
	color: var(--uc-subtle);
	text-align: center;
}

.useclick-loading {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--uc-subtle);
}

.useclick-loading .spinner {
	float: none;
	margin: 0;
}

@media (max-width: 782px) {
	.useclick-links-table thead {
		display: none;
	}

	.useclick-links-table tr,
	.useclick-links-table td {
		display: block;
		width: auto !important;
		text-align: left !important;
	}

	.useclick-links-table td[data-colname]::before {
		content: attr(data-colname);
		display: block;
		color: var(--uc-subtle);
		font-size: 12px;
		font-weight: 600;
	}
}

/* ---------------------------------------------------------------- modal */

.useclick-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(24, 24, 27, 0.38);
}

.useclick-modal[hidden] {
	display: none;
}

.useclick-modal-dialog {
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow: auto;
	border-radius: 16px;
	background: var(--uc-surface);
	box-shadow: 0 24px 64px rgba(24, 24, 27, 0.22);
}

.useclick-modal-header,
.useclick-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--uc-line-soft);
}

.useclick-modal-header h2 {
	margin: 0;
	color: var(--uc-ink);
	font-size: 16px;
	font-weight: 600;
}

.useclick-modal-footer {
	justify-content: flex-end;
	border-top: 1px solid var(--uc-line-soft);
	border-bottom: 0;
}

.useclick-modal-body {
	padding: 18px 22px;
}

body.useclick-modal-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------- settings */

.useclick-connection {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid var(--uc-positive-line);
	border-radius: 12px;
	background: var(--uc-positive-bg);
}

.useclick-connection-icon .dashicons {
	width: 24px;
	height: 24px;
	color: var(--uc-positive);
	font-size: 24px;
}

.useclick-connection-title {
	margin: 0 !important;
	color: var(--uc-ink) !important;
	font-size: 14px;
}

.useclick-facts th {
	width: 40%;
	font-weight: 500;
}

.useclick-wrap .useclick-facts {
	border-radius: 10px;
	border-color: var(--uc-line);
	box-shadow: none;
}

.useclick-actions-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
}

.useclick-inline-form {
	margin: 0;
}

.useclick-replace {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--uc-line-soft);
}

.useclick-replace > summary {
	margin-bottom: 10px;
	cursor: pointer;
}

.useclick-key-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.useclick-key-row input {
	font-family: var(--uc-mono);
}

/* ---------------------------------------------------------------- analytics */

.useclick-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--uc-fill);
	color: var(--uc-ink-2);
	font-size: 12px;
	font-weight: 500;
}

.useclick-pill--ok {
	background: var(--uc-positive-bg);
	color: var(--uc-positive);
}

.useclick-pill--warn {
	background: var(--uc-warning-bg);
	color: var(--uc-warning);
}

.useclick-pill--danger {
	background: var(--uc-danger-bg);
	color: var(--uc-danger);
}

.useclick-callout {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--uc-line);
	border-radius: 12px;
	background: var(--uc-canvas);
}

.useclick-callout--trial {
	border-color: var(--uc-positive-line);
	background: var(--uc-positive-bg);
}

.useclick-callout--warn {
	border-color: var(--uc-warning-line);
	background: var(--uc-warning-bg);
}

.useclick-callout strong {
	display: block;
	margin-bottom: 2px;
	color: var(--uc-ink);
}

.useclick-callout p {
	margin: 0;
	color: var(--uc-ink-2);
}

.useclick-snippet {
	margin-top: 10px;
	padding: 14px 16px;
	border: 1px solid var(--uc-line);
	border-radius: 12px;
	background: var(--uc-canvas);
}

.useclick-snippet p {
	margin-top: 0;
}

.useclick-snippet-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.useclick-snippet-row code {
	display: block;
	flex: 1;
	padding: 8px 10px;
	border: 1px solid var(--uc-line);
	border-radius: 8px;
	background: var(--uc-surface);
	font-family: var(--uc-mono);
	font-size: 12px;
	word-break: break-all;
}

.useclick-checklist {
	margin: 0 0 0 2px;
}

.useclick-checklist li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 22px;
	color: var(--uc-ink-2);
}

.useclick-checklist li::before {
	content: "\f147";
	position: absolute;
	top: -1px;
	left: 0;
	color: var(--uc-positive);
	font-family: dashicons;
	font-size: 18px;
}

.useclick-checklist--no li::before {
	content: "\f335";
	color: var(--uc-faint);
}

/* ---------------------------------------------------------------- post editor box and list column */

.useclick-postbox-link {
	margin: 0 0 8px;
	font-family: var(--uc-mono);
	font-size: 13px;
	word-break: break-all;
}

.useclick-postbox-link a {
	color: var(--uc-ink);
	font-weight: 600;
}

.useclick-postbox-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--uc-subtle);
}

.useclick-col-url {
	color: var(--uc-ink);
	font-family: var(--uc-mono);
	font-size: 12px;
	text-decoration: none;
	word-break: break-all;
}

.useclick-col-url:hover,
.useclick-col-url:focus {
	text-decoration: underline;
}

.useclick-col-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	color: var(--uc-subtle);
	font-size: 12px;
}

.useclick-col-result .notice {
	margin: 6px 0 0;
}

.column-useclick_short_link {
	width: 15%;
}

/* ---------------------------------------------------------------- analytics: one-click start */

.useclick-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 20px;
	border-color: var(--uc-brand-tint, #e8e8ff);
}

.useclick-start h2 {
	margin: 0 0 4px;
}

.useclick-start p {
	margin: 0;
	max-width: 62ch;
}

/* ---------------------------------------------------------------- settings: connect */

.useclick-connect {
	margin-bottom: 18px;
}

.useclick-connect-actions {
	margin: 14px 0 10px;
}

.useclick-setup-dismiss {
	margin-left: 8px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- analytics: report */

.useclick-report {
	margin-bottom: 20px;
	border: 1px solid var(--uc-line);
	border-radius: var(--uc-radius);
	overflow: hidden;
	background: var(--uc-canvas);
}

.useclick-report-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 14px 18px;
	background: var(--uc-surface);
	border-bottom: 1px solid var(--uc-line);
}

.useclick-report-head > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.useclick-report-head h2 {
	margin: 0;
	font-size: 15px;
}

.useclick-range {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border-radius: 10px;
	background: var(--uc-fill);
}

.useclick-range a {
	padding: 5px 10px;
	border-radius: 8px;
	color: var(--uc-muted);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.useclick-range a:hover,
.useclick-range a:focus {
	color: var(--uc-ink);
}

.useclick-range a.is-current {
	background: var(--uc-surface);
	color: var(--uc-ink);
	box-shadow: var(--uc-shadow);
}

.useclick-report-body {
	padding: 16px;
}

.useclick-report-body .useclick-card {
	margin: 0;
}

.useclick-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.useclick-kpi {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--uc-line);
	border-radius: 12px;
	background: var(--uc-surface);
}

.useclick-kpi-label {
	color: var(--uc-muted);
	font-size: 12px;
}

.useclick-kpi strong {
	color: var(--uc-ink);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.useclick-kpi-change {
	align-self: flex-start;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--uc-fill);
	color: var(--uc-muted);
	font-size: 11px;
	font-weight: 600;
}

.useclick-kpi-change.is-up {
	background: var(--uc-positive-bg);
	color: var(--uc-positive);
}

.useclick-kpi-change.is-down {
	background: var(--uc-danger-bg);
	color: var(--uc-danger);
}

.useclick-chart {
	margin-bottom: 12px !important;
}

.useclick-chart h3,
.useclick-toplist h3 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
}

.useclick-chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 160px;
	padding-top: 4px;
	border-bottom: 1px solid var(--uc-line);
}

.useclick-chart-bar {
	flex: 1 1 0;
	min-width: 1px;
	border-radius: 3px 3px 0 0;
	background: var(--uc-brand);
	opacity: 0.85;
}

.useclick-chart-bar:hover {
	opacity: 1;
}

.useclick-chart-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--uc-faint);
	font-size: 11px;
}

.useclick-toplists {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.useclick-toplist-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.useclick-toplist-head span {
	color: var(--uc-faint);
	font-size: 11px;
}

.useclick-toplist ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.useclick-toplist li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 4px;
	padding: 5px 8px;
	font-size: 13px;
}

.useclick-toplist-bar {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 6px;
	background: var(--uc-brand-tint);
}

.useclick-toplist-name,
.useclick-toplist-value {
	position: relative;
}

.useclick-toplist-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--uc-ink-2);
}

.useclick-toplist-value {
	color: var(--uc-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.useclick-toplist-empty {
	margin: 0;
	color: var(--uc-muted);
}

.useclick-report-foot {
	margin: 14px 2px 0;
	color: var(--uc-muted);
	font-size: 12px;
}

@media (max-width: 1100px) {
	.useclick-toplists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.useclick-kpis,
	.useclick-toplists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.useclick-toplists {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================================
   useClick.io dashboard look for controls (font, inputs, selects, buttons, checkboxes)
   ==================================================================================
   Matches the useclick.io dashboard (src/components/dashboard/v2/kit.tsx and
   dashboard-theme.css): Plus Jakarta Sans, 40px fields with the #E3E3E7 control border and
   the purple focus ring, the dark gradient primary button and outlined secondary buttons.
   Scoped to the plugin's own screens; `.wp-core-ui` + `:is()` outranks core and colour
   scheme button styles without !important. */

@font-face {
	font-family: "UseClick Jakarta";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "UseClick Jakarta";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.useclick-wrap,
.useclick-modal {
	--uc-control: #e3e3e7;
	--uc-line-strong: #d4d4d8;
	--uc-focus-line: #c9c8f5;
	--uc-focus-ring: 0 0 0 3px rgb(120 119 230 / 0.3);
	--uc-ghost: #b4b4bb;
	--uc-surface-hover: #fafafa;
	--uc-inverse-grad: linear-gradient(#3a3a3d, #151516);
	--uc-inverse-grad-hover: linear-gradient(#4a4a4e, #1f1f21);
	--uc-shadow-inverse: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 16px -6px rgb(0 0 0 / 0.35);
	font-family: "UseClick Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.useclick-wrap :is(h1, h2, h3, p, label, li, td, th, summary, legend, input, select, textarea, button, .button),
.useclick-modal :is(h1, h2, h3, p, label, li, td, th, summary, legend, input, select, textarea, button, .button) {
	font-family: inherit;
}

.useclick-wrap h2,
.useclick-modal h2 {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---- text fields and selects */

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :where(input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], select, textarea) {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--uc-control);
	border-radius: 10px;
	background-color: #fff;
	box-shadow: none;
	color: var(--uc-ink);
	font-size: 13.5px;
	line-height: 38px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) textarea {
	padding: 9px 12px;
	line-height: 1.5;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) select {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 16px;
	cursor: pointer;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input, select, textarea):hover:not(:disabled):not(:focus) {
	border-color: var(--uc-line-strong);
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input[type="text"], input[type="url"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], select, textarea):focus {
	border-color: var(--uc-focus-line);
	box-shadow: var(--uc-focus-ring);
	outline: none;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input, select, textarea):disabled,
.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input, select, textarea)[readonly] {
	border-color: var(--uc-line);
	background-color: var(--uc-fill);
	color: var(--uc-subtle);
}

.useclick-wrap ::placeholder,
.useclick-modal ::placeholder {
	color: var(--uc-ghost);
	opacity: 1;
}

/* ---- checkboxes and radios */

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: -2px 8px 0 0;
	border: 1px solid #c8c8ce;
	box-shadow: none;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) input[type="checkbox"] {
	border-radius: 5px;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input[type="checkbox"], input[type="radio"]):checked {
	border-color: var(--uc-ink);
	background: var(--uc-ink);
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) input[type="checkbox"]:checked::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) input[type="radio"]:checked::before {
	background: #fff;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) :is(input[type="checkbox"], input[type="radio"]):focus {
	border-color: var(--uc-focus-line);
	box-shadow: var(--uc-focus-ring);
	outline: none;
}

/* ---- buttons */

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--uc-control);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--uc-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button:hover {
	border-color: var(--uc-line-strong);
	background: var(--uc-surface-hover);
	color: var(--uc-ink);
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button:focus,
.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-primary:focus {
	box-shadow: var(--uc-focus-ring);
	outline: none;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-primary {
	border: 0;
	background: var(--uc-inverse-grad);
	box-shadow: var(--uc-shadow-inverse);
	color: #fff;
	padding: 0 18px;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-primary:hover {
	background: var(--uc-inverse-grad-hover);
	color: #fff;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-primary:focus {
	box-shadow: var(--uc-shadow-inverse), 0 0 0 3px rgb(120 119 230 / 0.45);
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button:disabled,
.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-small {
	min-height: 32px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 12.5px;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-hero {
	min-height: 44px;
	padding: 0 22px;
	border-radius: 11px;
	font-size: 14px;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button.button-link,
.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button-link-delete {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.wp-core-ui :is(.useclick-wrap, .useclick-modal) .button-link-delete,
.useclick-wrap .useclick-delete {
	color: var(--uc-danger);
}

/* ---- links and form rows */

.useclick-wrap a:not(.button),
.useclick-modal a:not(.button) {
	color: var(--uc-ink);
	text-decoration: underline;
	text-decoration-color: #c8c8ce;
	text-underline-offset: 3px;
}

.useclick-wrap a:not(.button):hover,
.useclick-modal a:not(.button):hover {
	text-decoration-color: currentColor;
}

.useclick-wrap .useclick-label,
.useclick-wrap .form-table th,
.useclick-modal .useclick-label {
	color: var(--uc-ink);
	font-size: 13px;
	font-weight: 600;
}

.useclick-wrap .description,
.useclick-modal .description {
	color: var(--uc-subtle);
	font-size: 12.5px;
	font-style: normal;
}

.useclick-wrap .useclick-section,
.useclick-modal .useclick-section {
	border-color: var(--uc-line);
	border-radius: 12px;
}

/* ---------------------------------------------------------------- plan card */

.useclick-plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.useclick-plan-head h2 {
	margin: 0;
}

.useclick-plan-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--uc-line);
	border-radius: 999px;
	background: var(--uc-fill);
	color: var(--uc-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.useclick-plan-badge.is-paid {
	border-color: #cdbef3;
	background: #f1ecfc;
	color: #6f42d7;
}

.useclick-plan-card .useclick-usage {
	margin-bottom: 14px;
}

.useclick-plan-card .useclick-checklist {
	margin-bottom: 14px;
}

.useclick-upgrade {
	margin-top: 4px;
	padding: 14px;
	border: 1px solid #e5ddf8;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8f5fe, #fff);
}

.useclick-card .useclick-upgrade p {
	margin: 0 0 12px;
	font-size: 13px;
}

.useclick-card .useclick-upgrade .useclick-upgrade-title {
	margin-bottom: 4px;
	color: var(--uc-ink);
	font-weight: 600;
}

.useclick-upgrade .button {
	width: 100%;
}

.useclick-wrap .useclick-upgrade-more {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	text-align: center;
}

/* ---------------------------------------------------------------- features card */

.useclick-features ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.useclick-features li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.useclick-wrap .useclick-features li a {
	font-weight: 600;
	text-decoration: none;
}

.useclick-wrap .useclick-features li a:hover {
	text-decoration: underline;
}

.useclick-features li span:not(.screen-reader-text) {
	color: var(--uc-subtle);
	font-size: 12.5px;
	line-height: 1.45;
}

/* Links inside tables and lists: no underline until hover (the short link and destination are
   already set apart by their type). */
.useclick-wrap .useclick-links-table a:not(.button),
.useclick-wrap .useclick-checklist a:not(.button) {
	text-decoration: none;
}

.useclick-wrap .useclick-links-table a:not(.button):hover {
	text-decoration: underline;
}

.wp-core-ui .useclick-wrap .useclick-slug-row select {
	min-width: 120px;
}