.jsn-notice {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 0.95em;
}
.jsn-notice-success { background: #e6f4ea; color: #1e4620; }
.jsn-notice-error { background: #fdecea; color: #611a15; }
.jsn-notice-info { background: #eef3fc; color: #1a3c6e; }
.jsn-notice-tip { background: #fff4e0; color: #6b4a00; }

.jsn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.jsn-card {
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.jsn-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: #000;
}

.jsn-video-wrap .jsn-video,
.jsn-video-wrap video.jsn-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.jsn-card-body {
	padding: 12px 14px 14px;
}

.jsn-card-title {
	margin: 0 0 2px;
	font-size: 1.05em;
	line-height: 1.3;
}

/* The contestant/team name, shown under the "Name It!" title — deliberately
   smaller and un-bold so the trick/performance name (the card's actual
   title) stays the visual focus. */
.jsn-card-contestant {
	margin: 0 0 8px;
	font-size: 0.85em;
	font-weight: 400;
	color: #666;
}

.jsn-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.jsn-vote-count {
	font-size: 0.9em;
	color: #555;
}

.jsn-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.jsn-vote-button {
	background: #d6336c;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 600;
	cursor: pointer;
}
.jsn-vote-button:disabled {
	background: #bbb;
	cursor: default;
}

/* Share re-uses the same pill shape as Vote, outlined instead of solid so
   the two read as "primary" vs. "secondary" without competing for
   attention — same convention as .jsn-review-button-reject. */
.jsn-share-button {
	background: #fff;
	color: #d6336c;
	border: 2px solid #d6336c;
	border-radius: 999px;
	padding: 6px 16px;
	font-weight: 600;
	cursor: pointer;
}
.jsn-share-button:disabled {
	color: #999;
	border-color: #ccc;
	cursor: default;
}

/* Copy Link is an icon-only button — the grey circle badge is baked into
   copy-link-icon.png itself (transparent everywhere else), so the button
   supplies no background/border of its own, just sizing and a hover cue.
   Kept round and neutral rather than pill-shaped like Vote/Share so it
   reads as a small utility action, not a third competing call to action. */
.jsn-copylink-button {
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: 0 0 auto;
}
.jsn-copylink-button:hover {
	opacity: 0.8;
}
.jsn-copylink-icon {
	width: 100%;
	height: 100%;
	display: block;
}

.jsn-vote-message,
.jsn-share-message {
	min-height: 1.2em;
	font-size: 0.85em;
	color: #555;
	margin: 6px 0 0;
}
.jsn-share-message:empty {
	margin: 0;
}

.jsn-empty {
	opacity: 0.75;
}

/* Signup form */
.jsn-signup-form p {
	margin: 0 0 14px;
}
.jsn-signup-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}
.jsn-signup-form input[type="text"],
.jsn-signup-form input[type="email"],
.jsn-signup-form input[type="url"] {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
}
.jsn-signup-form .jsn-hint {
	display: block;
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
	margin-top: 4px;
}
.jsn-signup-form .jsn-radio,
.jsn-signup-form .jsn-checkbox {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}
.jsn-req {
	color: #d6336c;
}
.jsn-consent {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 4px 0 14px;
}
.jsn-consent p {
	margin: 0;
	font-size: 0.85em;
	color: #555;
}
.jsn-button {
	background: #d6336c;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 24px;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
}

/* Front-end review dashboard */
.jsn-review-heading {
	margin: 28px 0 14px;
	font-size: 1.2em;
}
.jsn-review-heading:first-of-type {
	margin-top: 8px;
}

.jsn-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin-bottom: 8px;
}

.jsn-review-card {
	/* inherits .jsn-card layout */
}

.jsn-review-meta {
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
	margin: 0 0 4px;
	word-break: break-word;
}

.jsn-review-email {
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
	margin: 0 0 6px;
	word-break: break-word;
}

.jsn-review-votes {
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
	margin: 0 0 12px;
}

.jsn-review-actions {
	display: flex;
	gap: 10px;
}

.jsn-review-form {
	margin: 0;
	flex: 1;
}

/* Same pill-button family as .jsn-button (the Entry form's "Submit Entry"
   button) and .jsn-vote-button — Approve is the primary/positive action and
   gets the solid brand-pink treatment; Reject is the secondary action and
   gets the outlined version of the same pill, rather than an unrelated
   admin-style green/grey pair. */
.jsn-review-button {
	width: 100%;
	border-radius: 999px;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
}

.jsn-review-button-approve {
	background: #d6336c;
	color: #fff;
	border: none;
}

.jsn-review-button-reject {
	background: #fff;
	color: #d6336c;
	border: 2px solid #d6336c;
	padding: 8px 14px; /* 2px less than approve to offset its border, so both buttons are the same height */
}

.jsn-review-welcome {
	font-size: 0.9em;
	color: #666;
	margin: 0 0 18px;
}

.jsn-review-login-wrap p {
	margin: 0 0 14px;
}
.jsn-review-login-wrap .login-username,
.jsn-review-login-wrap .login-password {
	margin: 0 0 14px;
}
.jsn-review-login-wrap label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}
.jsn-review-login-wrap input[type="text"],
.jsn-review-login-wrap input[type="password"] {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
}
.jsn-review-login-wrap .login-remember {
	font-weight: 400;
	margin: 0 0 14px;
}
.jsn-review-login-wrap .login-submit input[type="submit"] {
	background: #d6336c;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 24px;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
}