/* D'Light Jury Platform — front-end styles
   Structure: dark sidebar + light workspace on desktop,
   collapses to a top bar + stacked single-column flow on mobile. */

/* Content-protection: text in the panel isn't selectable except inside
   the juror's own form fields (feedback textarea, inputs, etc.) — see
   dlj-panel.js for the matching contextmenu/copy blocking. */
.dlj-app { user-select: none; -webkit-user-select: none; }
.dlj-app input, .dlj-app textarea, .dlj-app [contenteditable="true"] {
	user-select: text; -webkit-user-select: text;
}

/* Anti-leak watermark — a single small, subtle stamp in the corner
   (not tiled), toggled from Settings → Anti-Leak Watermark. See
   dlj-panel.js for why this is only ever a deterrent, not a real block
   on screen recording/screenshots. */
.dlj-watermark-tile {
	position: fixed; bottom: 8px; inset-inline-end: 10px; z-index: 999999; pointer-events: none;
	font-size: 10px; font-weight: 600; color: rgba(0,0,0,.22);
	background: rgba(255,255,255,.55); padding: 2px 6px; border-radius: 4px;
	white-space: nowrap;
}

/* Printing (incl. "Print to PDF", a common export workaround) shows a
   blank notice instead of the jury content. */
@media print {
	.dlj-app > *:not(.dlj-print-block) { display: none !important; }
	.dlj-app::before {
		content: 'Printing is disabled for the Jury Panel.';
		display: block; padding: 40px; font-size: 16px;
	}
}

.dlj-app {
	--dlj-bg-dark: #0d0d0d;
	--dlj-bg-light: #fafafa;
	--dlj-border: #e5e5e5;
	--dlj-text: #1a1a1a;
	--dlj-text-muted: #767676;
	--dlj-accent: #f97316;
	--dlj-radius: 10px;
	--dlj-sidebar-w: 260px;

	display: grid;
	grid-template-columns: var(--dlj-sidebar-w) minmax(0, 1fr);

	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 640px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dlj-text);
	background: var(--dlj-bg-light);
	border-radius: var(--dlj-radius);
	overflow: hidden;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}


.dlj-app * { box-sizing: border-box; }
.dlj-app { word-break: break-word; overflow-wrap: break-word; }

/* Defensive isolation: the theme's own stylesheet was previously
   colliding with this panel because it used <aside>/<nav>/<main> tags
   that many WordPress themes style globally for their own sidebar/menu
   (float, position, width). Those tags were replaced with plain <div>s
   carrying the same classes; these rules are a second line of defense
   in case a theme also targets these classes by coincidence. */
.dlj-sidebar,
.dlj-main,
.dlj-right-panel {
	float: none;
	position: static;
	max-width: none;
}

.dlj-notice {
	padding: 40px;
	text-align: center;
	width: 100%;
}
.dlj-notice p { margin: 0 0 18px; font-size: 14px; }

/* The "please log in" / "not a juror" gate screen reuses .dlj-app but
   has no sidebar — without this it still inherits .dlj-app's 2-column
   grid (sidebar-width + content), leaving an empty reserved gutter and
   squeezing the centered notice off to one side, worst on mobile. */
.dlj-app--gate {
	grid-template-columns: 1fr;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

/* ---------------- Sidebar ---------------- */

.dlj-sidebar {
	width: var(--dlj-sidebar-w);
	min-width: var(--dlj-sidebar-w);
	max-width: var(--dlj-sidebar-w);
	grid-column: 1;
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;

	background: var(--dlj-bg-dark);
	color: #fff;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}

.dlj-brand.has-logo { margin: -24px -20px 0; }
.dlj-brand h1 { font-size: 20px; letter-spacing: .5px; margin: 0; }
.dlj-brand p { font-size: 11px; color: #9a9a9a; margin: 4px 0 0; line-height: 1.4; }
/* Full-bleed: spans the exact width of the sidebar edge-to-edge (the
   negative margin above cancels the sidebar's own padding). Height is
   NOT forced/cropped — it's whatever the image's own aspect ratio
   gives at that width, so the logo is never stretched or cut. */
.dlj-brand-logo { display: block; width: 100%; height: auto; }

.dlj-profile {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 18px 12px; border-top: 1px solid #262626; border-bottom: 1px solid #262626;
}
.dlj-profile .avatar { display: flex; justify-content: center; }
.dlj-profile .avatar img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; border: 2px solid #333; }
.dlj-profile .profile-name { font-weight: 600; margin-top: 10px; font-size: 14px; }
.dlj-profile .profile-role { font-size: 11px; color: #9a9a9a; margin-top: 2px; }
.dlj-profile .member-id {
	font-size: 11px; color: #d4d4d4; margin-top: 8px; background: #262626; border-radius: 20px;
	padding: 3px 12px; letter-spacing: .03em;
}

.dlj-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dlj-menu a {
	color: #c9c9c9;
	text-decoration: none;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}
.dlj-menu a:hover { background: #1a1a1a; color: #fff; }
.dlj-menu a.active { background: var(--dlj-accent); color: #fff; }
.dlj-menu a span { background: #262626; border-radius: 20px; padding: 1px 8px; font-size: 11px; }
.dlj-menu a.active span { background: rgba(255,255,255,.25); }
.dlj-menu h5 { font-size: 10px; color: #6b6b6b; letter-spacing: .08em; margin: 10px 0 0; padding: 0 10px; }
.dlj-menu hr { border: none; border-top: 1px solid #262626; margin: 6px 0; }
.dlj-check { color: #22c55e; }

.dlj-progress { border-top: 1px solid #262626; padding-top: 14px; }
.dlj-progress h5 { font-size: 10px; color: #6b6b6b; letter-spacing: .08em; margin: 0 0 6px; }
.dlj-progress .numbers { font-size: 22px; font-weight: 700; }
.dlj-progress p { font-size: 11px; color: #9a9a9a; margin: 2px 0 8px; }
.dlj-progress .progress { background: #262626; border-radius: 6px; height: 6px; overflow: hidden; }
.dlj-progress .progress span { display: block; height: 100%; background: var(--dlj-accent); }

.dlj-mobile-toggle { display: none; }
.dlj-sidebar-backdrop { display: none; }

/* ---------------- Main workspace ---------------- */

.dlj-main {
	grid-column: 2;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: 32px 36px;
	overflow-x: hidden;
	box-sizing: border-box;
}

.dlj-rule {
	height: 3px;
	width: 80px;
	background: linear-gradient(90deg, #f97316, #3b82f6, #ec4899);
	border-radius: 2px;
	margin: 14px 0 22px;
}

.dlj-primary {
	display: inline-block;
	background: var(--dlj-bg-dark);
	color: #fff;
	border: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.dlj-primary:hover { background: #262626; color: #fff; }
.dlj-secondary {
	display: inline-block;
	background: #fff;
	color: var(--dlj-text);
	border: 1px solid var(--dlj-border);
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-inline-start: 8px;
}

.dlj-editor-content p { line-height: 1.7; color: #333; margin: 0 0 14px; }

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

.dlj-welcome-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.dlj-letter h1 { font-size: 26px; margin: 0; }
.dlj-letter .signature { margin-top: 24px; }
.dlj-cursive { font-family: "Brush Script MT", cursive; font-size: 26px; }
.dlj-signature-img { max-height: 50px; }

.dlj-right-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.period-card, .steps-card, .dlj-why-card {
	background: #fff;
	border: 1px solid var(--dlj-border);
	border-radius: var(--dlj-radius);
	padding: 18px;
}
.period-card h4, .steps-card h4, .dlj-why-card h4 { font-size: 11px; color: var(--dlj-text-muted); letter-spacing: .06em; margin: 0 0 8px; }
.period-card h2 { font-size: 17px; margin: 0 0 8px; }
.period-card p { font-size: 12px; color: #666; margin: 0; line-height: 1.5; }

.steps-card .step { position: relative; padding: 8px 0; border-top: 1px solid var(--dlj-border); }
.steps-card .step:first-of-type { border-top: none; }
.steps-card .step b { display: block; font-size: 13px; }
.steps-card .step span { font-size: 12px; color: #777; }
.steps-card .step .dlj-check { position: absolute; right: 0; top: 8px; }

.dlj-why-item { padding: 10px 0; border-top: 1px solid var(--dlj-border); }
.dlj-why-item:first-of-type { border-top: none; }
.dlj-why-item strong { display: block; font-size: 13px; margin-bottom: 2px; }
.dlj-why-item span { font-size: 12px; color: #777; }

/* ---- Declaration ---- */

.dlj-declaration-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
.dlj-declaration-main { min-width: 0; }
.dlj-declaration-main h1 { margin: 0; font-size: 24px; }
.dlj-sub { color: var(--dlj-text-muted); font-size: 13px; margin: 4px 0 0; }
.dlj-declaration-text { max-height: 360px; overflow-y: auto; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--dlj-border); margin-bottom: 18px; }

.dlj-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 16px; }
.dlj-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.dlj-form-row label { font-size: 11px; color: var(--dlj-text-muted); display: block; margin-bottom: 4px; }
.dlj-form-row input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--dlj-border); border-radius: 6px; }
.dlj-form-error { color: #dc2626; font-size: 13px; margin-bottom: 10px; }
.dlj-declaration-signed { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.dlj-declaration-signed .dlj-meta { color: #666; font-size: 12px; margin: 4px 0 0; }
.dlj-declaration-reset-notice { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.dlj-declaration-reset-notice p { margin: 0; font-size: 13px; color: #7c3a00; line-height: 1.6; }
.dlj-download-pdf {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
	font-size: 12px; font-weight: 600; text-decoration: none; color: var(--dlj-text);
	border: 1px solid var(--dlj-border); border-radius: 8px; padding: 8px 12px; background: #fff;
}
.dlj-download-pdf:hover { border-color: var(--dlj-accent); }

/* ---------------- Signature pad (draw or upload) ---------------- */
.dlj-signature-block { margin-bottom: 16px; }
.dlj-signature-block > label { font-size: 11px; color: var(--dlj-text-muted); display: block; margin-bottom: 8px; }
.dlj-signature-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.dlj-sig-tab {
	flex: 1; padding: 8px 10px; font-size: 12px; font-weight: 600; text-align: center;
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 8px; cursor: pointer; color: var(--dlj-text-muted);
}
.dlj-sig-tab.is-active { color: #fff; background: #111; border-color: #111; }
.dlj-sig-pane[hidden] { display: none; }
#dlj-signature-canvas {
	width: 100%; max-width: 380px; height: 140px; display: block; margin: 0 auto; border: 1px dashed var(--dlj-border);
	border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none;
}
.dlj-sig-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.dlj-link-btn { background: none; border: none; padding: 0; color: var(--dlj-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.dlj-sig-hint { font-size: 11px; color: var(--dlj-text-muted); }
.dlj-sig-upload-preview {
	display: flex; align-items: center; justify-content: center; min-height: 100px;
	border: 1px dashed var(--dlj-border); border-radius: 8px; margin-bottom: 10px; background: #fff; overflow: hidden;
}
.dlj-sig-upload-preview img { max-height: 96px; max-width: 100%; object-fit: contain; }
.dlj-sig-upload-preview span { font-size: 12px; color: var(--dlj-text-muted); }
.dlj-file-btn {
	display: inline-block; padding: 9px 16px; font-size: 12px; font-weight: 600;
	background: #111; color: #fff; border-radius: 7px; cursor: pointer; text-align: center;
}
.dlj-file-btn:hover { background: #262626; }

/* ---- Static pages (How to Judge / Help) ---- */

.dlj-static-page h1 { margin: 0; font-size: 24px; }
.dlj-criteria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 28px; }
.dlj-criteria-card {
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 10px; padding: 14px;
	display: flex; flex-direction: column; gap: 6px;
}
.dlj-criteria-card .dlj-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dlj-accent); }
.dlj-criteria-card .dlj-scale { font-size: 12px; color: var(--dlj-text-muted); }

.dlj-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.dlj-table th, .dlj-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--dlj-border); font-size: 13px; }
.dlj-table th { color: var(--dlj-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }

/* ---- Evaluate workspace ---- */

.dlj-entry-header {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 16px; border-bottom: 1px solid var(--dlj-border); margin-bottom: 20px;
	font-size: 11px; color: var(--dlj-text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.dlj-entry-header strong { color: var(--dlj-text); font-size: 13px; }
.dlj-entry-nav { display: flex; align-items: center; gap: 10px; }
.dlj-nav-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dlj-border); border-radius: 6px; text-decoration: none; color: var(--dlj-text); }
.dlj-nav-btn.is-disabled { opacity: .3; pointer-events: none; }

.dlj-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.dlj-gallery-main { position: relative; }
.dlj-gallery-main img, .dlj-gallery-placeholder { width: 100%; border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; background: #eee; cursor: zoom-in; }
.dlj-gallery-zoom {
	position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(23,23,23,.65); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dlj-gallery-zoom:hover { background: rgba(23,23,23,.85); }
.dlj-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.dlj-gallery-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; opacity: .7; transition: opacity .15s, border-color .15s; }
.dlj-gallery-thumbs img:hover { opacity: 1; }
.dlj-gallery-thumbs img.is-active { opacity: 1; border-color: var(--dlj-accent, #171717); }

.dlj-lightbox {
	position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,10,.92);
	display: flex; align-items: center; justify-content: center;
}
.dlj-lightbox[hidden] { display: none; }
.dlj-lightbox-img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.dlj-lightbox-close {
	position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dlj-lightbox-close:hover { background: rgba(255,255,255,.22); }
.dlj-lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dlj-lightbox-nav:hover { background: rgba(255,255,255,.22); }
.dlj-lightbox-prev { left: 24px; }
.dlj-lightbox-next { right: 24px; }
.dlj-lightbox-count {
	position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #d4d4d4; font-size: 13px;
	background: rgba(255,255,255,.1); padding: 4px 12px; border-radius: 20px;
}
.dlj-entry-title { font-size: 20px; margin: 16px 0 4px; }
.dlj-entry-desc { color: #666; font-size: 13px; line-height: 1.5; }

/* Collapsible "View Full Information" block: material/dimensions/
   technology/application-style meta plus the WPUF category tag and an
   optional spec-sheet PDF link, all shown inline in the main column —
   not tucked away anywhere else. */
.dlj-info-toggle {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
	background: none; border: none; padding: 0; cursor: pointer;
	font-size: 12px; font-weight: 600; color: var(--dlj-text);
}
.dlj-info-toggle .dlj-info-chevron { transition: transform .15s ease; font-size: 10px; }
.dlj-info-toggle[aria-expanded="true"] .dlj-info-chevron { transform: rotate(180deg); }
.dlj-info-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; font-size: 12px; }
.dlj-info-panel[hidden] { display: none; }
.dlj-info-panel span { display: block; color: var(--dlj-text-muted); text-transform: uppercase; font-size: 10px; }
.dlj-info-panel .dlj-info-full { grid-column: 1 / -1; }
.dlj-spec-pdf-link {
	grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px;
	margin-top: 4px; font-size: 12px; text-decoration: none; color: var(--dlj-text);
	border: 1px solid var(--dlj-border); border-radius: 8px; padding: 8px 12px; width: fit-content;
}
.dlj-spec-pdf-link:hover { border-color: var(--dlj-accent); }

.dlj-meta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; font-size: 12px; }
.dlj-meta-row span { display: block; color: var(--dlj-text-muted); text-transform: uppercase; font-size: 10px; }

.dlj-entry-media,
.dlj-criteria-panel, .dlj-feedback-panel {
	min-width: 0;
}
.dlj-feedback-panel {
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 12px; padding: 20px;
}
/* "Evaluate this Entry" panel: dark so each criterion's dimmer/bulb
   reads like a real light fixture — the glow only registers against a
   dark surface, same as it wouldn't against a lit room. */
.dlj-criteria-panel {
	background: radial-gradient(circle at 25% -10%, #202030 0%, #0c0c12 55%, #08080c 100%);
	border: 1px solid #26262f; border-radius: 12px; padding: 20px; color: #e9e9f0;
}
.dlj-criteria-panel h3, .dlj-feedback-panel h3 { margin: 0 0 4px; font-size: 15px; }
.dlj-criteria-panel h3 { color: #fff; }
.dlj-hint { font-size: 12px; color: var(--dlj-text-muted); margin: 0 0 16px; }
.dlj-criteria-panel .dlj-hint { color: #93939f; }

.dlj-criterion { padding: 12px 0; border-top: 1px solid var(--dlj-border); }
.dlj-criteria-panel .dlj-criterion { border-top-color: #24242e; }
.dlj-criterion:first-of-type { border-top: none; }
.dlj-criterion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dlj-criterion-label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dlj-criteria-panel .dlj-criterion-label { color: #e9e9f0; }
.dlj-criterion-label .dlj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dlj-accent); }
.dlj-criterion { --dlj-accent: #f97316; }

.dlj-bulb {
	display: inline-block; font-size: 18px; line-height: 1; transform-origin: center;
	filter: grayscale(1) brightness(.5) drop-shadow(0 0 0 transparent);
	transition: filter .12s ease-out, transform .12s ease-out;
}
.dlj-bulb.is-lit { transform: scale(1.08); }

/* Pulses like current surging through the filament while a dimmer is
   actively being dragged — see the "is-dragging" toggle in dlj-panel.js. */
@keyframes dlj-electric-pulse {
	0%, 100% { filter: drop-shadow(0 0 2px var(--dlj-accent)) drop-shadow(0 0 6px var(--dlj-accent)); }
	50%      { filter: drop-shadow(0 0 8px var(--dlj-accent)) drop-shadow(0 0 18px var(--dlj-accent)); }
}
.dlj-criterion:has(.dlj-dimmer.is-dragging) .dlj-bulb {
	animation: dlj-electric-pulse .5s ease-in-out infinite;
}

.dlj-dimmer {
	--dlj-fill: 0%;
	width: calc(100% - 46px); vertical-align: middle;
	accent-color: var(--dlj-accent);
	-webkit-appearance: none; appearance: none;
	height: 6px; border-radius: 999px; outline: none;
	background: linear-gradient(to right, var(--dlj-accent) 0%, var(--dlj-accent) var(--dlj-fill), #e6e6e6 var(--dlj-fill), #e6e6e6 100%);
}
.dlj-criteria-panel .dlj-dimmer {
	background: linear-gradient(to right, var(--dlj-accent) 0%, var(--dlj-accent) var(--dlj-fill), rgba(255,255,255,.12) var(--dlj-fill), rgba(255,255,255,.12) 100%);
}
.dlj-dimmer::-webkit-slider-runnable-track { -webkit-appearance: none; height: 6px; border-radius: 999px; background: transparent; }
.dlj-dimmer::-webkit-slider-thumb {
	-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; margin-top: -6px;
	background: #fff; border: 3px solid var(--dlj-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dlj-accent) 18%, transparent), 0 1px 3px rgba(0,0,0,.25);
	cursor: pointer; transition: box-shadow .15s ease-out;
}
.dlj-criteria-panel .dlj-dimmer::-webkit-slider-thumb { background: #0c0c12; }
.dlj-dimmer::-moz-range-track { height: 6px; border-radius: 999px; background: #e6e6e6; }
.dlj-criteria-panel .dlj-dimmer::-moz-range-track { background: rgba(255,255,255,.12); }
.dlj-dimmer::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--dlj-accent); }
.dlj-dimmer::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--dlj-accent);
	box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; transition: box-shadow .15s ease-out;
}
.dlj-criteria-panel .dlj-dimmer::-moz-range-thumb { background: #0c0c12; }
.dlj-dimmer:disabled::-webkit-slider-thumb { cursor: not-allowed; }

/* Dragging: the filled track glows and pulses like a live current,
   and the thumb gets a brighter halo — same accent color as the bulb. */
.dlj-dimmer.is-dragging { animation: dlj-electric-pulse .5s ease-in-out infinite; }
.dlj-dimmer.is-dragging::-webkit-slider-thumb {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--dlj-accent) 32%, transparent), 0 0 16px var(--dlj-accent), 0 1px 3px rgba(0,0,0,.25);
}
.dlj-dimmer.is-dragging::-moz-range-thumb { box-shadow: 0 0 16px var(--dlj-accent), 0 1px 3px rgba(0,0,0,.25); }

.dlj-score-box {
	display: inline-flex; width: 34px; height: 26px; align-items: center; justify-content: center;
	background: #111; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; margin-left: 8px;
}
.dlj-criteria-panel .dlj-score-box { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }

.dlj-overall { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dlj-border); }
.dlj-criteria-panel .dlj-overall { border-top-color: #24242e; }
.dlj-overall span { display: block; font-size: 10px; color: var(--dlj-text-muted); text-transform: uppercase; }
.dlj-criteria-panel .dlj-overall span { color: #93939f; }
.dlj-overall-label { font-size: 15px; }
.dlj-criteria-panel .dlj-overall-label { color: #fff; }
.dlj-total {
	background: var(--dlj-bg-dark); color: #fff; border-radius: 12px; padding: 10px 22px; text-align: center;
}
.dlj-criteria-panel .dlj-total {
	background: #1c1c26; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.dlj-total span { color: #b5b5b5; font-size: 10px; }
.dlj-total strong { font-size: 34px; line-height: 1.15; display: block; }
.dlj-total strong .dlj-total-value { font-size: 34px; font-weight: 800; }
.dlj-total strong .dlj-total-max { font-size: 16px; font-weight: 500; color: #b5b5b5; }

.dlj-feedback-panel textarea { width: 100%; border: 1px solid var(--dlj-border); border-radius: 8px; padding: 10px; font-size: 13px; resize: vertical; }
.dlj-feedback-panel textarea.is-required { border-color: #f97316; }
.dlj-feedback-required-badge {
	display: inline-block; margin-inline-start: 6px; font-size: 10px; font-weight: 700;
	color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 2px 8px;
	text-transform: uppercase; letter-spacing: .03em; vertical-align: middle;
}
.dlj-ai-policy-notice {
	margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; font-weight: 600;
	color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 8px 10px;
}
.dlj-feedback-error {
	margin-top: 8px; font-size: 12px; color: #b91c1c; background: #fef2f2;
	border: 1px solid #fecaca; border-radius: 6px; padding: 8px 10px;
}
.dlj-feedback-error[hidden] { display: none; }
.dlj-flag-row, .dlj-conflict-row { margin-top: 12px; font-size: 12px; }
.dlj-flag-row select { width: 100%; padding: 6px; border: 1px solid var(--dlj-border); border-radius: 6px; margin-top: 4px; }
.dlj-feedback-panel .dlj-primary, .dlj-feedback-panel .dlj-secondary { width: 100%; margin: 14px 0 0; margin-inline-start: 0; }
.dlj-save-status { display: block; text-align: center; font-size: 12px; color: #22c55e; margin-top: 8px; min-height: 16px; }

/* Live character counter under the mandatory feedback textarea. */
.dlj-feedback-counter {
	margin-top: 6px; font-size: 11.5px; font-weight: 600; text-align: end; color: var(--dlj-text-muted);
}
.dlj-feedback-counter.is-invalid { color: #b91c1c; }
.dlj-feedback-counter.is-valid { color: #15803d; }

/* "Declare Conflict" notice: a clean, unmissable red box that explains
   the effect of the checkbox before the juror ticks it. */
.dlj-conflict-notice {
	display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px;
	background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
	border: 1px solid #fca5a5; border-inline-start: 4px solid #dc2626;
	border-radius: 10px; box-shadow: 0 1px 3px rgba(220,38,38,.08);
}
.dlj-conflict-notice-icon {
	flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
	background: #dc2626; color: #fff; border-radius: 50%; font-size: 13px; line-height: 1;
}
.dlj-conflict-notice p {
	margin: 0; font-size: 12px; line-height: 1.55; font-weight: 600; color: #991b1b;
}
.dlj-conflict-row { display: flex; align-items: center; }
.dlj-conflict-row label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #991b1b; cursor: pointer; }
.dlj-conflict-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #dc2626; cursor: pointer; }

/* When "Declare Conflict" is checked, the entry is being skipped —
   dim and disable the scoring/feedback controls so it's visually clear
   nothing else here is needed before saving. */
.dlj-criteria-panel.is-conflict-disabled { opacity: .4; pointer-events: none; filter: grayscale(.4); }
.dlj-feedback-panel.is-conflict-disabled .dlj-ai-policy-notice,
.dlj-feedback-panel.is-conflict-disabled textarea,
.dlj-feedback-panel.is-conflict-disabled .dlj-feedback-counter { opacity: .4; pointer-events: none; }

.dlj-ranking-strip { margin-top: 28px; }
.dlj-ranking-strip h4 { font-size: 13px; margin: 0 0 10px; }
.dlj-ranking-strip h4 span { font-weight: 400; color: var(--dlj-text-muted); font-size: 11px; margin-inline-start: 6px; }
.dlj-ranking-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.dlj-rank-card {
	flex: 0 0 110px; background: #fff; border: 1px solid var(--dlj-border); border-radius: 10px; padding: 8px;
	text-decoration: none; color: var(--dlj-text); position: relative;
}
.dlj-rank-card.is-current { border-color: var(--dlj-accent); box-shadow: 0 0 0 1px var(--dlj-accent); }
.dlj-rank-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.dlj-rank-num { position: absolute; top: 6px; left: 6px; background: #111; color: #fff; font-size: 10px; border-radius: 4px; padding: 1px 5px; }
.dlj-rank-code { display: block; font-size: 11px; margin-top: 6px; }
.dlj-rank-score { display: block; font-size: 11px; color: var(--dlj-text-muted); }

/* ---------------- Responsive ---------------- */

@media (max-width: 960px) {
	/* This was the main cause of the cramped/overflowing mobile layout:
	   .dlj-app is a CSS Grid (not flex), so "flex-direction: column"
	   here did nothing — the sidebar's explicit 260px column track was
	   still being reserved even after the sidebar itself became a
	   fixed, off-canvas drawer below, squeezing every page's actual
	   content into whatever sliver of the phone's width was left over. */
	.dlj-app { grid-template-columns: 1fr; }

	.dlj-mobile-toggle {
		display: block;
		position: absolute;
		top: 14px; left: 14px;
		background: var(--dlj-bg-dark);
		color: #fff;
		border: none;
		width: 38px; height: 38px;
		border-radius: 8px;
		font-size: 16px;
		z-index: 20;
	}

	.dlj-sidebar {
		position: fixed;
		inset: 0 20% 0 0;
		z-index: 30;
		transform: translateX(-100%);
		transition: transform .25s ease;
		width: 80%;
		max-width: 300px;
	}
	.dlj-sidebar.is-open { transform: translateX(0); }

	.dlj-sidebar-backdrop {
		display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.45);
		opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	.dlj-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

	.dlj-main { grid-column: 1; padding: 60px 16px 32px; }

	.dlj-welcome-layout,
	.dlj-declaration-layout,
	.dlj-workspace { grid-template-columns: 1fr; }

	.dlj-criteria-grid { grid-template-columns: 1fr 1fr; }
	.dlj-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	/* Two-column label/value grids read as a cramped wall of tiny text
	   on a narrow phone — one column per row is easier to scan. */
	.dlj-info-panel,
	.dlj-meta-row { grid-template-columns: 1fr; }

	.dlj-criteria-grid { grid-template-columns: 1fr; }

	.dlj-eval-stats,
	.dlj-ranked-stats { grid-template-columns: 1fr; }

	.dlj-declaration-text { max-height: 300px; }
}

/* ---------------- RTL isolation ----------------
   The panel is a fixed, English-language dashboard layout (icons,
   numeric badges, left-to-right score dimmers) and is not meant to
   mirror on an RTL (e.g. Persian) site. Many WordPress themes load
   their own rtl.css automatically whenever the site language is RTL,
   and that stylesheet typically targets generic tags — input, select,
   textarea, table, th/td, label — with high specificity, overriding
   text-align and float regardless of this panel's own dir="ltr". Left
   unchecked that's exactly what pushed content sideways under the
   sidebar. These rules re-assert LTR on every element inside .dlj-app
   so the panel always renders the way it was designed, no matter what
   direction the surrounding page runs. */
.dlj-app,
.dlj-app * {
	direction: ltr !important;
	text-align: left !important;
	float: none !important;
	box-sizing: border-box;
}
.dlj-app input,
.dlj-app select,
.dlj-app textarea,
.dlj-app button {
	direction: ltr !important;
	text-align: left !important;
}
.dlj-overall,
.dlj-sig-actions,
.dlj-declaration-form .dlj-checkbox {
	text-align: left !important;
}
.dlj-total { text-align: right !important; }
.dlj-score-box,
.dlj-rank-num,
.dlj-check { text-align: center !important; }

/* ---------------- My Evaluations dashboard ---------------- */

.dlj-eval-header h1 { margin: 0 0 16px; font-size: 24px; }

.dlj-eval-tabs {
	display: flex; gap: 4px; border-bottom: 1px solid var(--dlj-border); margin-bottom: 18px;
}
.dlj-eval-tabs a {
	padding: 10px 4px; margin-right: 20px; font-size: 12px; font-weight: 700; letter-spacing: .03em;
	color: var(--dlj-text-muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.dlj-eval-tabs a.is-active { color: var(--dlj-accent); border-bottom-color: var(--dlj-accent); }

.dlj-eval-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dlj-eval-stat {
	display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--dlj-border);
	border-radius: 10px; padding: 14px;
}
.dlj-eval-stat-icon {
	width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 9px; position: relative;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px;
}
/* Icon is inline SVG (see dlj_stat_icon_svg()); absolute + transform
   centering keeps it dead-center in the square regardless of the
   icon's own proportions — the same approach used for .dlj-icon-circle. */
.dlj-eval-stat-icon svg {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 18px; height: 18px; display: block;
}
.dlj-eval-stat strong { display: block; font-size: 18px; line-height: 1.1; }
.dlj-eval-stat span { display: block; font-size: 11px; color: var(--dlj-text-muted); margin-top: 2px; }

.dlj-eval-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: #fff8ec; border: 1px solid #fde3b6; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px;
}
.dlj-eval-banner strong { display: block; font-size: 14px; margin-bottom: 2px; }
.dlj-eval-banner span { font-size: 12px; color: #8a6a2f; }
.dlj-eval-banner .dlj-secondary { white-space: nowrap; }

.dlj-eval-section { margin-bottom: 26px; }
.dlj-eval-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dlj-eval-section-head h4 { margin: 0; font-size: 14px; }
.dlj-eval-section-head a { font-size: 12px; color: var(--dlj-text-muted); text-decoration: none; }
.dlj-eval-section-head a:hover { color: var(--dlj-accent); }

.dlj-eval-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

.dlj-eval-card {
	display: block; text-decoration: none; color: var(--dlj-text); background: #fff;
	border: 1px solid var(--dlj-border); border-radius: 10px; overflow: hidden; position: relative;
}
.dlj-eval-card:hover { border-color: var(--dlj-accent); }
.dlj-eval-card-media { position: relative; aspect-ratio: 4/3; background: #eee; }
.dlj-eval-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlj-eval-card-placeholder { width: 100%; height: 100%; background: #ececec; }
.dlj-eval-card-badge {
	position: absolute; top: 8px; left: 8px; color: #fff; font-size: 10px; font-weight: 700;
	border-radius: 5px; padding: 2px 6px;
}
.dlj-eval-card-status {
	position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; border-radius: 20px;
	padding: 3px 9px; background: rgba(255,255,255,.92);
}
.dlj-status--not-scored { color: #b45309; }
.dlj-status--in-review { color: #1d4ed8; }
.dlj-status--completed { color: #15803d; }
.dlj-eval-card-body { padding: 10px 12px 14px; }
.dlj-eval-card-body strong { display: block; font-size: 13px; text-transform: uppercase; margin-bottom: 4px; }
.dlj-eval-card-body span { display: block; font-size: 11px; color: var(--dlj-text-muted); }
.dlj-eval-card-arrow {
	position: absolute; bottom: 10px; right: 12px; font-size: 16px; color: var(--dlj-text-muted);
}

@media (max-width: 700px) {
	.dlj-eval-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dlj-eval-banner { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   How to Judge — level3
   ================================================================ */

.dlj-howto-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.dlj-howto-main h1 { margin: 0; font-size: 24px; }

.dlj-scale-card, .dlj-reminders-card {
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 12px; padding: 20px 22px; margin: 22px 0;
}
.dlj-scale-card h4, .dlj-reminders-card h4 {
	margin: 0 0 16px; font-size: 11px; letter-spacing: .06em; color: var(--dlj-text-muted); font-weight: 700;
}
.dlj-scale-numbers { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.dlj-scale-num {
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--dlj-border); border-radius: 8px; font-weight: 700; font-size: 15px;
	aspect-ratio: 1 / 1; background: #fafafa; color: #171717; transition: background .15s, border-color .15s;
}
.dlj-scale-num:hover { background: #f0f0f0; border-color: #ccc; }
.dlj-scale-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dlj-scale-band { --dlj-band-color: #999; }
.dlj-scale-band-bar { display: block; height: 3px; border-radius: 3px; background: var(--dlj-band-color); margin-bottom: 6px; }
.dlj-scale-band-label { display: block; font-size: 11px; color: var(--dlj-text-muted); line-height: 1.3; }
.dlj-scale-info {
	margin-top: 16px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 8px;
	padding: 10px 14px; font-size: 12px; line-height: 1.5;
}

.dlj-reminders-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.dlj-reminder-item {
	display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 9px 0; border-top: 1px solid var(--dlj-border);
}
.dlj-reminder-item:nth-child(-n+2) { border-top: none; }
.dlj-reminder-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

.dlj-avoid-card {
	background: #fff8ec; border: 1px solid #fde3b6; border-radius: 12px; padding: 20px 22px; margin: 22px 0;
}
.dlj-avoid-card h4 { margin: 0 0 16px; font-size: 12px; letter-spacing: .04em; color: #b91c1c; font-weight: 700; }
.dlj-avoid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.dlj-avoid-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dlj-avoid-x {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
	background: #fee2e2; color: #dc2626; font-size: 11px; flex-shrink: 0;
}

.dlj-howto-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.dlj-howto-actions .dlj-primary, .dlj-howto-actions .dlj-secondary { margin: 0; }

.dlj-howto-criteria-panel {
	background: var(--dlj-bg-dark); color: #fff; border-radius: 12px; padding: 22px;
}
.dlj-howto-criteria-panel h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; color: #d4d4d4; }
.dlj-howto-criteria-panel > p { margin: 0 0 18px; font-size: 12px; color: #9a9a9a; line-height: 1.5; }
.dlj-howto-criteria-list { display: flex; flex-direction: column; gap: 16px; }
.dlj-howto-criteria-item { display: flex; align-items: flex-start; gap: 12px; }
.dlj-icon-circle {
	width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; position: relative;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	font-size: 18px; line-height: 40px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); overflow: hidden;
}
/* Absolute + transform centering rather than relying on flexbox alone:
   this keeps the icon dead-center inside the circle no matter the
   image's own aspect ratio, and is immune to the circle ever getting
   squeezed to an oval by its flex parent (.dlj-howto-criteria-item). */
.dlj-icon-circle img {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 60%; height: 60%; object-fit: contain; object-position: center; display: block;
}
.dlj-howto-criteria-item strong { display: block; font-size: 13px; margin-bottom: 2px; }
.dlj-howto-criteria-item span { display: block; font-size: 11px; color: #9a9a9a; line-height: 1.4; }
.dlj-howto-footer-note {
	margin-top: 20px; border: 1px solid #333; border-radius: 8px; padding: 12px 14px; font-size: 11px;
	color: #d4d4d4; line-height: 1.5;
}

/* ================================================================
   Review & Finalize Your Rankings — level6
   ================================================================ */

.dlj-ranked-header h1 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlj-step-badge {
	font-size: 11px; font-weight: 600; color: var(--dlj-text-muted); background: #f2f2f2; border-radius: 20px;
	padding: 3px 10px;
}

.dlj-ranked-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 24px; }
.dlj-ranked-stat {
	display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--dlj-border);
	border-radius: 10px; padding: 14px;
}
.dlj-ranked-stat strong { display: block; font-size: 20px; line-height: 1.1; }
.dlj-ranked-stat span { display: block; font-size: 11px; color: var(--dlj-text-muted); margin-top: 2px; }

.dlj-ranked-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.dlj-ranked-main { min-width: 0; }

.dlj-ranked-table-wrap { overflow-x: auto; }
.dlj-ranked-table { min-width: 640px; }
.dlj-ranked-crit-col { text-align: center !important; width: 34px; }
.dlj-ranked-num {
	display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
	background: #f2f2f2; font-size: 11px; font-weight: 700;
}
.dlj-ranked-entry-cell { display: flex; align-items: center; gap: 10px; }
.dlj-ranked-entry-cell img, .dlj-ranked-entry-thumb-placeholder {
	width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: #eee; flex-shrink: 0;
}
.dlj-ranked-entry-cell strong { display: block; font-size: 13px; }
.dlj-ranked-entry-cell span { display: block; font-size: 11px; color: var(--dlj-text-muted); }
.dlj-ranked-total { color: #15803d; font-size: 15px; }
.dlj-edit-scores-link { font-size: 12px; color: var(--dlj-text-muted); text-decoration: none; white-space: nowrap; }
.dlj-edit-scores-link:hover { color: var(--dlj-accent); }

.dlj-summary-table td:first-child { display: flex; align-items: center; gap: 8px; }

.dlj-finalize-card {
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 12px; padding: 22px; text-align: center;
}
.dlj-finalize-card h4 { margin: 0 0 12px; font-size: 14px; }
.dlj-finalize-icon { font-size: 30px; margin-bottom: 10px; }
.dlj-finalize-card p { font-size: 12px; color: #666; line-height: 1.5; margin: 0 0 14px; }
.dlj-finalize-checklist { text-align: left; margin-bottom: 16px; }
.dlj-finalize-checklist div {
	font-size: 12px; color: var(--dlj-text-muted); padding: 6px 0; border-top: 1px solid var(--dlj-border);
}
.dlj-finalize-checklist div:first-child { border-top: none; }
.dlj-finalize-checklist div.is-done { color: #15803d; }
.dlj-finalize-card .dlj-primary,
.dlj-finalize-card .dlj-secondary { width: 100%; margin: 0 0 10px; text-align: center; justify-content: center; }
.dlj-finalize-warning { margin: 10px 0 0; }

/* ================================================================
   Completed / Thank You — level7 (locked)
   ================================================================ */

/* ================================================================
   Judging closed — full-screen replacement for entries
   ================================================================ */

.dlj-judging-closed { max-width: 480px; margin: 40px auto; text-align: center; }
.dlj-judging-closed-icon { font-size: 34px; margin-bottom: 6px; }
.dlj-judging-closed h1 { font-size: 22px; margin: 0 0 8px; }
.dlj-judging-closed .dlj-hint { margin: 0 0 22px; }
.dlj-judging-closed-period { text-align: left; }

.dlj-countdown { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dlj-border); }
.dlj-countdown-label { display: block; font-size: 11px; color: var(--dlj-text-muted); letter-spacing: .04em; margin-bottom: 8px; }
.dlj-countdown-clock { display: flex; gap: 10px; }
.dlj-countdown-clock > div {
	flex: 1; text-align: center; background: #fafafa; border: 1px solid var(--dlj-border);
	border-radius: 8px; padding: 8px 4px;
}
.dlj-countdown-clock strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.dlj-countdown-clock span { display: block; font-size: 10px; color: var(--dlj-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dlj-countdown[hidden] { display: none; }

.dlj-locked-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: #f2f2f2; border: 1px solid #d9d9d9; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
	font-size: 13px; color: #444;
}
.dlj-locked-banner a { color: var(--dlj-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dlj-locked-banner a:hover { color: var(--dlj-accent); }

.dlj-completed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }

.dlj-completed-list { display: flex; flex-direction: column; gap: 10px; }
.dlj-completed-row {
	display: grid; grid-template-columns: 28px 44px minmax(0,1.6fr) minmax(0,1fr) 120px 90px 24px;
	align-items: center; gap: 12px; background: #fff; border: 1px solid var(--dlj-border); border-radius: 10px;
	padding: 10px 14px; text-decoration: none; color: var(--dlj-text);
}
.dlj-completed-row:hover { border-color: var(--dlj-accent); }
.dlj-completed-row-badge {
	width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.dlj-completed-row-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #eee; }
.dlj-completed-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlj-completed-row-title strong { display: block; font-size: 13px; }
.dlj-completed-row-title span { display: block; font-size: 11px; color: var(--dlj-text-muted); }
.dlj-completed-row-cat { font-size: 12px; color: var(--dlj-text-muted); }
.dlj-completed-row-date { font-size: 11px; color: var(--dlj-text-muted); white-space: nowrap; }
.dlj-completed-row-score { font-weight: 700; font-size: 13px; color: #15803d; white-space: nowrap; }
.dlj-completed-row-arrow { color: var(--dlj-text-muted); text-align: right; }

.dlj-thankyou-card {
	background: #fff; border: 1px solid var(--dlj-border); border-radius: 12px; padding: 26px 22px; text-align: center;
}
.dlj-thankyou-icon { font-size: 34px; margin-bottom: 8px; }
.dlj-thankyou-card h3 { margin: 0 0 14px; font-size: 18px; }
.dlj-thankyou-card strong { display: block; font-size: 14px; margin-bottom: 6px; }
.dlj-thankyou-card p { font-size: 12px; color: #666; line-height: 1.5; margin: 0 0 14px; }
.dlj-thankyou-card .dlj-primary { width: 100%; margin: 0 0 6px; text-align: center; justify-content: center; }
.dlj-thankyou-note { font-size: 11px !important; color: #999 !important; }

.dlj-whatsnext { text-align: left; margin: 18px 0; border-top: 1px solid var(--dlj-border); padding-top: 16px; }
.dlj-whatsnext h5 { font-size: 10px; letter-spacing: .06em; color: var(--dlj-text-muted); margin: 0 0 12px; }
.dlj-whatsnext-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.dlj-whatsnext-item span:first-child { font-size: 16px; }
.dlj-whatsnext-item strong { display: block; font-size: 12px; }
.dlj-whatsnext-item span:last-child { display: block; font-size: 11px; color: var(--dlj-text-muted); line-height: 1.4; }

.dlj-thankyou-card .dlj-secondary { width: 100%; text-align: center; justify-content: center; margin: 0; }

/* ================================================================
   Locked read-only workspace tweaks
   ================================================================ */

.dlj-dimmer:disabled { opacity: .55; cursor: not-allowed; }
.dlj-feedback-panel textarea[readonly] { background: #fafafa; color: #555; }

/* ---------------- Responsive additions ---------------- */

@media (max-width: 960px) {
	.dlj-howto-layout,
	.dlj-ranked-body,
	.dlj-completed-layout { grid-template-columns: 1fr; }

	.dlj-scale-numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 8px; }
	.dlj-scale-bands { grid-template-columns: 1fr 1fr; }
	.dlj-reminders-list, .dlj-avoid-grid { grid-template-columns: 1fr; }
	.dlj-ranked-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.dlj-completed-row {
		grid-template-columns: 24px 40px 1fr; grid-template-areas: "badge thumb title" "badge thumb cat" "score score score";
		row-gap: 4px;
	}
	.dlj-completed-row-cat, .dlj-completed-row-date { display: none; }
}

/* ================================================================
   Jury Login ([dlight_jury_login]) — a standalone card, not nested
   inside .dlj-app, so it defines its own copy of the palette
   variables that .dlj-primary/.dlj-secondary/etc. rely on.
   ================================================================ */

.dlj-login-wrap {
	--dlj-bg-dark: #0d0d0d;
	--dlj-border: #e5e5e5;
	--dlj-text: #1a1a1a;
	--dlj-text-muted: #767676;
	--dlj-accent: #f97316;

	box-sizing: border-box;
	max-width: 380px;
	margin: 40px auto;
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--dlj-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dlj-text);
}
.dlj-login-wrap * { box-sizing: border-box; }
.dlj-login-wrap h2 { margin: 0 0 18px; font-size: 19px; }

.dlj-login-error {
	background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
	font-size: 13px; border-radius: 8px; padding: 10px 12px; margin-bottom: 16px;
}
.dlj-login-already { font-size: 13px; color: var(--dlj-text-muted); margin: 0 0 16px; }

.dlj-login-form { display: flex; flex-direction: column; gap: 4px; }
.dlj-login-form label {
	font-size: 11px; color: var(--dlj-text-muted); text-transform: uppercase; letter-spacing: .04em;
	margin-top: 12px;
}
.dlj-login-form label:first-of-type { margin-top: 0; }
.dlj-login-form input[type="text"],
.dlj-login-form input[type="password"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--dlj-border); border-radius: 8px;
	font-size: 14px; margin-top: 4px;
}
.dlj-login-remember {
	display: flex !important; align-items: center; gap: 6px; text-transform: none !important;
	font-size: 12px !important; margin-top: 14px !important;
}
.dlj-login-submit { width: 100%; text-align: center; margin-top: 20px; }
.dlj-login-lost {
	display: block; text-align: center; margin-top: 16px; font-size: 12px;
	color: var(--dlj-text-muted); text-decoration: none;
}
.dlj-login-lost:hover { color: var(--dlj-accent); }

@media (max-width: 480px) {
	.dlj-login-wrap { margin: 20px 14px; padding: 22px 18px; }
}