/* SEO Checker — sve skopirano pod .dsc-app da ne curi u temu/admin. */

.dsc-app {
	--dsc-bg: #0a0a12;
	--dsc-card: #12121f;
	--dsc-card-hover: #171728;
	--dsc-border: #23233a;
	--dsc-text: #e8e8f2;
	--dsc-dim: #8a8aa3;
	--dsc-accent: #7c5cff;
	--dsc-accent2: #00e5c7;
	--dsc-ok: #22d98b;
	--dsc-warn: #ffb547;
	--dsc-fail: #ff5470;
	--dsc-info: #5ca8ff;
	--dsc-radius: 14px;

	box-sizing: border-box;
	max-width: 860px;
	background: var(--dsc-bg);
	background-image:
		radial-gradient(ellipse 60% 40% at 20% -10%, rgba(124, 92, 255, .18), transparent),
		radial-gradient(ellipse 50% 35% at 85% 0%, rgba(0, 229, 199, .10), transparent);
	color: var(--dsc-text);
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	border-radius: 18px;
	padding: 28px;
	margin: 12px 0;
}

.dsc-app *,
.dsc-app *::before,
.dsc-app *::after { box-sizing: border-box; }

.dsc-app [hidden] { display: none !important; }

/* forma */
.dsc-form {
	display: flex;
	gap: 10px;
	background: var(--dsc-card);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	padding: 10px;
	margin: 0;
	transition: border-color .2s, box-shadow .2s;
}
.dsc-form:focus-within {
	border-color: var(--dsc-accent);
	box-shadow: 0 0 0 3px rgba(124, 92, 255, .15);
}
.dsc-app .dsc-url {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
	color: var(--dsc-text);
	font-family: inherit;
	font-size: 16px;
	padding: 10px 12px;
}
.dsc-app .dsc-url::placeholder { color: var(--dsc-dim); }
.dsc-app .dsc-btn {
	background: linear-gradient(135deg, var(--dsc-accent), #5a3df0);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 10px;
	transition: transform .12s, box-shadow .2s, opacity .2s;
	white-space: nowrap;
}
.dsc-app .dsc-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(124, 92, 255, .4);
}
.dsc-app .dsc-btn:disabled { opacity: .55; cursor: wait; }

/* stanja */
.dsc-loading { text-align: center; margin-top: 30px; color: var(--dsc-dim); }
.dsc-spinner {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border: 3px solid var(--dsc-border);
	border-top-color: var(--dsc-accent);
	border-radius: 50%;
	animation: dsc-spin .8s linear infinite;
}
@keyframes dsc-spin { to { transform: rotate(360deg); } }
.dsc-error {
	margin-top: 20px;
	padding: 16px 20px;
	background: rgba(255, 84, 112, .1);
	border: 1px solid rgba(255, 84, 112, .35);
	border-radius: var(--dsc-radius);
	color: #ff8fa3;
	font-size: 15px;
}

/* rezime */
.dsc-results { margin-top: 28px; }
.dsc-summary {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	background: var(--dsc-card);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	padding: 26px;
}
.dsc-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.dsc-ring svg { transform: rotate(-90deg); display: block; }
.dsc-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.dsc-ring .dsc-track { stroke: var(--dsc-border); }
.dsc-ring .dsc-bar { stroke: var(--dsc-ok); transition: stroke-dashoffset 1s ease, stroke .3s; }
.dsc-num {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.dsc-num b { font-size: 34px; line-height: 1; }
.dsc-num span {
	font-size: 11px;
	color: var(--dsc-dim);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-top: 4px;
}
.dsc-sum-info { flex: 1; min-width: 220px; }
.dsc-final-url { font-size: 15px; word-break: break-all; margin-bottom: 6px; }
.dsc-final-url a { color: var(--dsc-accent2); text-decoration: none; }
.dsc-meta { color: var(--dsc-dim); font-size: 13px; margin-bottom: 14px; }
.dsc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.dsc-pill {
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 99px;
	border: 1px solid var(--dsc-border);
}
.dsc-p-ok { color: var(--dsc-ok); background: rgba(34, 217, 139, .1); }
.dsc-p-warn { color: var(--dsc-warn); background: rgba(255, 181, 71, .1); }
.dsc-p-fail { color: var(--dsc-fail); background: rgba(255, 84, 112, .1); }

/* grupe provera */
.dsc-group { margin-top: 26px; }
.dsc-group h2 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dsc-dim);
	margin: 0 0 12px;
	padding: 0;
}
.dsc-check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--dsc-card);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	padding: 15px 18px;
	margin-bottom: 10px;
	transition: background .15s;
}
.dsc-check:hover { background: var(--dsc-card-hover); }
.dsc-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	margin-top: 2px;
}
.dsc-i-ok { background: rgba(34, 217, 139, .15); color: var(--dsc-ok); }
.dsc-i-warn { background: rgba(255, 181, 71, .15); color: var(--dsc-warn); }
.dsc-i-fail { background: rgba(255, 84, 112, .15); color: var(--dsc-fail); }
.dsc-i-info { background: rgba(92, 168, 255, .15); color: var(--dsc-info); }
.dsc-check-body { flex: 1; min-width: 0; }
.dsc-check-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dsc-check-top .dsc-label { font-weight: 700; font-size: 15px; color: var(--dsc-text); }
.dsc-check-top .dsc-value {
	color: var(--dsc-dim);
	font-size: 13.5px;
	word-break: break-word;
	text-align: right;
}
.dsc-hint { color: var(--dsc-dim); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }

@media (max-width: 600px) {
	.dsc-app { padding: 16px; }
	.dsc-form { flex-direction: column; }
	.dsc-app .dsc-btn { width: 100%; }
}

/* ==========================================================================
   Svetli "editorial" skin — podrazumevan za [seo_checker] na sajtu.
   Nasleđuje boje i fontove aktivne teme preko CSS varijabli (--ink,
   --ink-soft, --accent, --line, --sans, --serif) sa fallback vrednostima,
   pa se uklapa u DIDIKOM temu bez ikakvog dodatnog CSS-a u temi.
   ========================================================================== */

.dsc-app.dsc-skin-light {
	--dsc-bg: transparent;
	--dsc-card: rgba(255, 255, 255, .55);
	--dsc-card-hover: rgba(255, 255, 255, .9);
	--dsc-border: var(--line, rgba(20, 19, 16, .14));
	--dsc-text: var(--ink, #141310);
	--dsc-dim: var(--ink-soft, #54504a);
	--dsc-accent: var(--accent, #e0561f);
	--dsc-accent2: var(--accent, #e0561f);
	--dsc-ok: #1f8f54;
	--dsc-warn: #b97324;
	--dsc-fail: #c73333;
	--dsc-info: #3d6bd8;

	background: transparent;
	border-radius: 0;
	padding: 0;
	font-family: var(--sans, 'Inter', 'Segoe UI', system-ui, sans-serif);
}

/* forma: papir na svetloj pozadini, dugme kao .btn teme (pilula, ink → accent) */
.dsc-skin-light .dsc-form {
	background: rgba(255, 255, 255, .7);
}
.dsc-skin-light .dsc-form:focus-within {
	border-color: var(--dsc-accent);
	box-shadow: 0 0 0 3px rgba(224, 86, 31, .12);
}
.dsc-skin-light .dsc-btn {
	background: var(--dsc-text);
	border-radius: 99px;
	font-weight: 500;
	font-family: inherit;
	font-size: 14px;
	padding: 12px 24px;
}
.dsc-skin-light .dsc-btn:hover:not(:disabled) {
	background: var(--dsc-accent);
	box-shadow: 0 6px 20px rgba(224, 86, 31, .35);
}

/* stanja */
.dsc-skin-light .dsc-spinner {
	border-color: var(--dsc-border);
	border-top-color: var(--dsc-accent);
}
.dsc-skin-light .dsc-error {
	background: rgba(199, 51, 51, .06);
	border-color: rgba(199, 51, 51, .3);
	color: #a32c2c;
}

/* rezime: skor u display fontu teme */
.dsc-skin-light .dsc-num b {
	font-family: var(--serif, 'Sora', 'Inter', sans-serif);
	font-weight: 600;
}
.dsc-skin-light .dsc-final-url a { color: var(--dsc-accent); }
.dsc-skin-light .dsc-pill { background: rgba(255, 255, 255, .6); }
.dsc-skin-light .dsc-p-ok { color: var(--dsc-ok); background: rgba(31, 143, 84, .07); }
.dsc-skin-light .dsc-p-warn { color: var(--dsc-warn); background: rgba(185, 115, 36, .07); }
.dsc-skin-light .dsc-p-fail { color: var(--dsc-fail); background: rgba(199, 51, 51, .07); }

/* naslovi grupa u stilu kicker-a teme (crtica u akcentnoj boji) */
.dsc-skin-light .dsc-group h2 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--dsc-dim);
}
.dsc-skin-light .dsc-group h2::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--dsc-accent);
}

/* kartice provera */
.dsc-skin-light .dsc-i-ok { background: rgba(31, 143, 84, .1); }
.dsc-skin-light .dsc-i-warn { background: rgba(185, 115, 36, .1); }
.dsc-skin-light .dsc-i-fail { background: rgba(199, 51, 51, .1); }
.dsc-skin-light .dsc-i-info { background: rgba(61, 107, 216, .1); }