/* Download page: open-source Lite panel and PHP2Shell security notice.
   Loaded after site.css + legacy.css; scoped under .dl to outrank the legacy theme. */

.dl {
	--dl-radius: 14px;
	--dl-rust: #8a3a0c;
	--dl-rust-50: #fff4ee;
	--dl-rust-line: #f3cbb8;
	display: grid; gap: 1.25rem; margin: 8px 0 40px; text-align: left;
	font: 400 16px/1.6 var(--font-sans); color: var(--ink-950); -webkit-font-smoothing: antialiased;
}
.dl *, .dl *::before, .dl *::after { box-sizing: border-box; }
.dl :where(h2, h3, p, ul, ol, li) { margin: 0; padding: 0; border: 0; background: none; }
.dl :where(ul, ol) { list-style: none; }
.dl :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

/* ---- Security notice ---- */
.dl .dl-alert {
	display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem;
	border: 1px solid var(--dl-rust-line); border-radius: var(--dl-radius); background: var(--dl-rust-50); color: #5a2f1c;
}
.dl .dl-alert__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--dl-rust); color: var(--white); }
.dl .dl-alert__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl .dl-alert h2 { font: 700 17px/1.35 var(--font-sans) !important; letter-spacing: normal; color: var(--dl-rust); }
.dl .dl-alert p { margin-top: .25rem; font-size: 15px; line-height: 1.55; }
.dl .dl-alert a { color: var(--dl-rust); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Lite panel ---- */
.dl .dl-lite {
	position: relative; overflow: hidden; display: grid; gap: 1.75rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: var(--dl-radius); background: var(--ink-950); color: #c4c7d2;
	box-shadow: 0 30px 60px -36px rgba(18, 20, 27, .6);
}
.dl .dl-lite::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40rem 20rem at 100% 0%, rgba(124, 129, 240, .35), transparent 70%); }
.dl .dl-lite > * { position: relative; }
@media (min-width: 900px) { .dl .dl-lite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2.5rem; } }
.dl .dl-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.dl .dl-tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font: 500 12px/1.4 var(--font-mono); background: rgba(255, 255, 255, .1); color: #dfe0f7; }
.dl .dl-tag--brand { background: var(--indigo); color: var(--white); }
.dl .dl-lite h2 { font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.1 var(--font-display) !important; letter-spacing: -0.03em; color: var(--white); }
.dl .dl-lite__lede { margin-top: .75rem; max-width: 38rem; font-size: 1.0625rem; }
.dl .dl-lite__fine { margin-top: 1rem; max-width: 38rem; font-size: 14px; color: #9ea2b3; }
.dl .dl-lite__fine a { color: #c9cbf7; text-decoration: underline; text-underline-offset: 2px; }
.dl .dl-lite__fine a:hover { color: var(--white); }

.dl .dl-actions { display: grid; gap: .75rem; }
.dl .dl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.2rem;
	border: 1px solid transparent; border-radius: 8px; font: 600 15px/1.2 var(--font-sans) !important; text-decoration: none !important;
	transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-normal) var(--ease-out-expo);
}
.dl .dl-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl .dl-btn:active { transform: translateY(1px); }
.dl .dl-btn--primary { background: var(--indigo); color: var(--white) !important; }
.dl .dl-btn--primary:hover { background: var(--indigo-600); }
.dl .dl-btn--ghost { border-color: rgba(255, 255, 255, .22); color: var(--white) !important; }
.dl .dl-btn--ghost:hover { border-color: rgba(255, 255, 255, .5); }
.dl .dl-btn--light { background: var(--white); color: var(--ink-950) !important; }
.dl .dl-btn--light:hover { background: #ececf4; }

@media (prefers-reduced-motion: reduce) {
	.dl * { transition: none !important; }
}