/* Abhishek Site Cleanup Controls – Admin Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

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

/* ── Wrap ───────────────────────────────────────────────── */
.deo-wrap {
	--deo-bg:          #0d0f14;
	--deo-surface:     #161920;
	--deo-surface-2:   #1e2230;
	--deo-border:      rgba(255,255,255,.07);
	--deo-accent:      #4ade80;
	--deo-accent-dim:  rgba(74,222,128,.12);
	--deo-accent-2:    #38bdf8;
	--deo-text:        #e8eaf0;
	--deo-muted:       #64748b;
	--deo-danger:      #f87171;
	--deo-radius:      12px;
	--deo-radius-sm:   8px;

	font-family: 'DM Sans', sans-serif;
	background: var(--deo-bg);
	min-height: 100vh;
	margin: -10px -20px 0;
	padding: 0;
	color: var(--deo-text);
}

/* ── Header ─────────────────────────────────────────────── */
.deo-header {
	background: linear-gradient(135deg, #0d0f14 0%, #161b2e 100%);
	border-bottom: 1px solid var(--deo-border);
	padding: 28px 32px;
	position: sticky;
	top: 32px;
	z-index: 100;
}

.deo-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}

.deo-logo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.deo-logo-icon {
	font-size: 40px;
	line-height: 1;
	filter: drop-shadow(0 0 16px rgba(74,222,128,.5));
}

.deo-logo h1 {
	font-size: 22px;
	font-weight: 700;
	color: var(--deo-text);
	margin: 0 0 4px;
	letter-spacing: -.3px;
}

.deo-logo p {
	font-size: 13px;
	color: var(--deo-muted);
	margin: 0;
}

.deo-header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* ── Saved badge ─────────────────────────────────────────── */
.deo-saved-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: var(--deo-accent-dim);
	border: 1px solid var(--deo-accent);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--deo-accent);
	animation: deo-fade-in .3s ease;
}

@keyframes deo-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ─────────────────────────────────────────────── */
.deo-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: var(--deo-radius-sm);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	border: none;
	outline: none;
}

.deo-btn-primary {
	background: var(--deo-accent);
	color: #0a1a0e;
	box-shadow: 0 4px 20px rgba(74,222,128,.3);
}

.deo-btn-primary:hover {
	background: #6ee7a0;
	box-shadow: 0 6px 28px rgba(74,222,128,.45);
	transform: translateY(-1px);
}

.deo-btn-outline {
	background: transparent;
	color: var(--deo-muted);
	border: 1px solid var(--deo-border);
}

.deo-btn-outline:hover {
	background: var(--deo-surface-2);
	color: var(--deo-text);
	border-color: rgba(255,255,255,.15);
}

/* ── Body ────────────────────────────────────────────────── */
.deo-body {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Notice ──────────────────────────────────────────────── */
.deo-notice {
	background: rgba(251,191,36,.07);
	border: 1px solid rgba(251,191,36,.2);
	border-radius: var(--deo-radius-sm);
	padding: 14px 18px;
	font-size: 13px;
	color: #fbbf24;
	line-height: 1.6;
	margin-bottom: 12px;
}

.deo-notice code {
	background: rgba(251,191,36,.15);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'DM Mono', monospace;
	font-size: 12px;
}

/* Warning notice inside accordion body */
.deo-notice-warning {
	background: rgba(248,113,113,.07);
	border-color: rgba(248,113,113,.25);
	color: #fca5a5;
	margin: 16px 16px 0;
	border-radius: var(--deo-radius-sm);
}

/* ── Group ───────────────────────────────────────────────── */
.deo-group {
	background: var(--deo-surface);
	border: 1px solid var(--deo-border);
	border-radius: var(--deo-radius);
	overflow: hidden;
}

.deo-group-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	background: rgba(255,255,255,.02);
	cursor: pointer;
	user-select: none;
	transition: background .15s;
}

.deo-group-header:hover {
	background: rgba(255,255,255,.05);
}

.deo-group.is-open .deo-group-header {
	border-bottom: 1px solid var(--deo-border);
}

/* ── Chevron ─────────────────────────────────────────────── */
.deo-group-chevron {
	flex-shrink: 0;
	color: var(--deo-muted);
	transition: transform .25s ease;
	font-size: 12px;
	line-height: 1;
}

.deo-group.is-open .deo-group-chevron {
	transform: rotate(180deg);
}

/* ── Accordion body ──────────────────────────────────────── */
.deo-group-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .25s ease;
}

.deo-group.is-open .deo-group-body {
	grid-template-rows: 1fr;
}

.deo-group-body-inner {
	overflow: hidden;
}

.deo-group-icon {
	font-size: 20px;
}

.deo-group-header h2 {
	font-size: 15px;
	font-weight: 600;
	color: var(--deo-text);
	margin: 0;
	flex: 1;
}

.deo-group-count {
	font-size: 11px;
	color: var(--deo-muted);
	background: var(--deo-surface-2);
	padding: 4px 10px;
	border-radius: 20px;
	font-family: 'DM Mono', monospace;
	border: 1px solid var(--deo-border);
}

/* ── Feature Grid ────────────────────────────────────────── */
.deo-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1px;
	background: var(--deo-border);
}

/* ── Feature Card ────────────────────────────────────────── */
.deo-feature-card {
	background: var(--deo-surface);
	cursor: pointer;
	transition: background .15s;
	display: block;
}

.deo-feature-card:hover {
	background: var(--deo-surface-2);
}

.deo-feature-card.is-active {
	background: var(--deo-accent-dim);
}

.deo-feature-card.is-active:hover {
	background: rgba(74,222,128,.18);
}

.deo-feature-card-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	gap: 12px;
}

.deo-feature-label {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--deo-text);
	line-height: 1.4;
}

.deo-feature-card.is-active .deo-feature-label {
	color: var(--deo-accent);
}

/* ── Toggle ──────────────────────────────────────────────── */
.deo-toggle-wrap {
	position: relative;
	flex-shrink: 0;
}

.deo-toggle-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.deo-toggle {
	display: block;
	width: 42px;
	height: 24px;
	background: var(--deo-surface-2);
	border: 1px solid var(--deo-border);
	border-radius: 24px;
	position: relative;
	transition: background .2s, border-color .2s, box-shadow .2s;
	cursor: pointer;
}

.deo-toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--deo-muted);
	border-radius: 50%;
	transition: transform .2s, background .2s;
}

.deo-toggle-input:checked + .deo-toggle {
	background: var(--deo-accent);
	border-color: var(--deo-accent);
	box-shadow: 0 0 12px rgba(74,222,128,.35);
}

.deo-toggle-input:checked + .deo-toggle::after {
	transform: translateX(18px);
	background: #0a1a0e;
}

/* ── Footer ──────────────────────────────────────────────── */
.deo-footer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 32px 40px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.deo-version {
	font-size: 12px;
	color: var(--deo-muted);
	font-family: 'DM Mono', monospace;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 782px) {
	.deo-header { padding: 20px; position: static; }
	.deo-header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.deo-body { padding: 20px; gap: 12px; }
	.deo-footer { padding: 16px 20px 32px; }
	.deo-features-grid { grid-template-columns: 1fr; }
}