@import url("fonts/fonts-local.css");
/* cocks.io v3 - clean slate, orange on black */
/* Accessibility: skip-to-content link */
.ck-skip-nav { position: absolute; top: -100px; left: 0; background: #ff6a1a; color: #0a0a0c; padding: 12px 24px; z-index: 9999; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; transition: top .2s; }
.ck-skip-nav:focus { top: 0; outline: 3px solid #22d3ee; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { overflow-x: hidden !important; scroll-behavior: smooth !important; }
body { background: #0a0a0c !important; color: #e8e6e1 !important; font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; margin: 0 !important; overflow-x: hidden !important; }
/* Focus visible for keyboard navigation */
:focus-visible { outline: 3px solid #ff6a1a !important; outline-offset: 2px !important; }
a, a:link, a:visited { color: #ff6a1a !important; text-decoration: none; }
#wrapper { max-width: 1020px !important; margin: 0 auto !important; padding: 0 24px !important; background: transparent !important; }
#wrapper::before { content: ""; display: block; height: 110px; margin: 0 -24px; background: radial-gradient(560px 130px at 50% 0%, rgba(255,106,26,.12), transparent 70%); pointer-events: none; }
#banner_top { all: unset !important; display: flex !important; align-items: baseline !important; gap: 10px !important; padding: 20px 0 12px !important; margin: 0 !important; border-bottom: 1px solid #1c1c21 !important; }
#banner_top h1 { all: unset !important; display: inline !important; font-family: "Space Grotesk", sans-serif !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; line-height: 1 !important; white-space: nowrap !important; }
#banner_top h1 a { all: unset !important; display: inline !important; color: #fff !important; cursor: pointer; font-family: "Space Grotesk", sans-serif !important; font-size: 19px !important; font-weight: 700 !important; }
#banner_top h1 a em { font-style: normal !important; color: #ff6a1a !important; }
#banner_top span { font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: #63636b !important; white-space: nowrap !important; }
#tag { display: none !important; }
#infobar { background: none !important; border: none !important; margin: 0 !important; padding: 12px 0 0 !important; }
#infobar .loginbox { background: #121215 !important; border: 1px solid #2a2a30 !important; border-radius: 14px !important; padding: 12px 16px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; float: none !important; width: auto !important; }
#infobar .loginbox label { color: #63636b !important; font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 2px !important; }
#infobar .loginbox input[type=text], #infobar .loginbox input[type=password] { background: #0a0a0c !important; border: 1px solid #2a2a30 !important; color: #fff !important; border-radius: 9px !important; padding: 9px 12px !important; font-family: "JetBrains Mono", monospace !important; font-size: 14px !important; margin: 0 !important; }
#infobar .loginbox input[type=text]:focus, #infobar .loginbox input[type=password]:focus { outline: none !important; border-color: #ff6a1a !important; box-shadow: 0 0 0 3px rgba(255,106,26,.15) !important; }
#infobar .loginbox input.submit { background: #ff6a1a !important; color: #0a0a0c !important; border: none !important; border-radius: 9px !important; padding: 9px 24px !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; font-family: "Space Grotesk", sans-serif !important; margin: 0 !important; }
#infobar .loginbox input.submit:hover { background: #ff8c42 !important; box-shadow: 0 0 24px rgba(255,106,26,.35) !important; }
.ck-hero { padding: 34px 0 8px !important; max-width: 720px !important; }
.ck-eyebrow { font-family: "JetBrains Mono", monospace !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: #ff6a1a !important; margin: 0 0 14px !important; }
.ck-hero h2 { color: #fff !important; font-size: 54px !important; line-height: 1.02 !important; letter-spacing: -2px !important; margin: 0 0 16px !important; font-weight: 700 !important; }
.ck-sub { color: #a7a6a1 !important; font-size: 17px !important; line-height: 1.65 !important; margin: 0 !important; max-width: 600px !important; }
.ck-sub code { font-family: "JetBrains Mono", monospace !important; color: #ff6a1a !important; background: #141417 !important; padding: 1px 7px !important; border-radius: 5px !important; font-size: 14px !important; }
.ck-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 12px !important; padding: 30px 0 8px !important; }
.ck-card { background: #121215 !important; border: 1px solid #222227 !important; border-radius: 14px !important; padding: 20px !important; }
.ck-card:hover { border-color: #ff6a1a !important; }
.ck-card h3 { color: #fff !important; margin: 0 0 8px !important; font-size: 15px !important; font-weight: 700 !important; }
.ck-card h3 span { font-family: "JetBrains Mono", monospace !important; color: #ff6a1a !important; font-size: 12px !important; margin-right: 8px !important; }
.ck-card p { margin: 0 !important; color: #a7a6a1 !important; font-size: 14px !important; line-height: 1.6 !important; }
.ck-card code { font-family: "JetBrains Mono", monospace !important; color: #ff6a1a !important; font-size: 13px !important; }
.ck-steps { padding: 26px 0 6px !important; max-width: 680px !important; }
.ck-steps h3 { color: #fff !important; font-size: 22px !important; letter-spacing: -0.5px !important; }
.ck-steps ol { color: #a7a6a1 !important; line-height: 2 !important; padding-left: 22px !important; }
.ck-steps ol li::marker { color: #ff6a1a !important; font-family: "JetBrains Mono", monospace !important; }
.ck-steps code { font-family: "JetBrains Mono", monospace !important; color: #ff6a1a !important; background: #141417 !important; padding: 1px 7px !important; border-radius: 5px !important; }
#footerbar { color: #55555c !important; font-family: "JetBrains Mono", monospace !important; font-size: 12px !important; text-align: center !important; padding: 34px 0 44px !important; letter-spacing: 1px !important; }
#main, #content, #subpage { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; }
/* auth section: compact one-liner login + register link */
.ck-action-bar { padding: 30px 0 10px !important; border-top: 1px solid #1c1c21 !important; margin-top: 20px !important; }
.ck-oneliner { display: flex !important; gap: 8px !important; align-items: center !important; max-width: 520px !important; margin: 0 auto 12px !important; }
.ck-oneliner input[type=text], .ck-oneliner input[type=password] { background: #0a0a0c !important; border: 1px solid #2a2a30 !important; color: #fff !important; border-radius: 9px !important; padding: 10px 12px !important; font-family: "JetBrains Mono", monospace !important; font-size: 13px !important; flex: 1 !important; min-width: 0 !important; }
.ck-oneliner input:focus { outline: none !important; border-color: #ff6a1a !important; box-shadow: 0 0 0 3px rgba(255,106,26,.15) !important; }
.ck-oneliner .submit { flex-shrink: 0 !important; }
.ck-action-links { text-align: center !important; }
.ck-register-link { color: #ff6a1a !important; font-size: 13px !important; font-weight: 600 !important; }
.ck-register-link:hover { text-decoration: underline !important; }
.ck-sep { color: #55555c !important; margin: 0 8px !important; }
/* hide top infobar login when on landing page (has .ck-hero) */
.ck-hero ~ * #infobar .ck-loginform, .ck-hero + .ck-grid ~ * #infobar .ck-loginform { display: none !important; }
#infobar .ck-loginform { display: none !important; }
@media (max-width: 640px) { .ck-oneliner { flex-direction: column !important; } .ck-oneliner input[type=text], .ck-oneliner input[type=password] { width: 100% !important; } .ck-oneliner .submit { width: 100% !important; } }
@media (max-width: 640px) { .ck-hero h2 { font-size: 36px !important; } }
/* inner pages: breadcrumb, messages, tables, forms */
#breadcrumb { font-family: "JetBrains Mono", monospace !important; font-size: 12px !important; color: #55555c !important; padding: 2px 0 14px !important; letter-spacing: 1px !important; }
#breadcrumb a { color: #ff6a1a !important; }
/* message bars */
.errorbar { background: #2a1215 !important; border: 1px solid #7a2a30 !important; color: #ff9a9a !important; border-radius: 10px !important; padding: 12px 16px !important; margin: 0 0 14px !important; }
.successbar { background: #0f2417 !important; border: 1px solid #2a7a3d !important; color: #7de2a0 !important; border-radius: 10px !important; padding: 12px 16px !important; margin: 0 0 14px !important; }
/* content typography */
#content h1, #content h2, #content h3 { color: #fff !important; letter-spacing: -0.5px !important; }
#content p, #content li, #content td, #content th { color: #d6d3cd !important; font-size: 14px !important; }
/* tables — clean, no overflow, no scrollbars */
#content table { width: 100% !important; border-collapse: collapse !important; background: #121215 !important; border: 1px solid #222227 !important; border-radius: 12px !important; margin: 0 0 18px !important; }
td.mod_name { white-space: nowrap !important; }
td.mod_name label { white-space: nowrap !important; }
#content th { background: #17171b !important; color: #ff6a1a !important; font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-align: left !important; padding: 12px 14px !important; border-bottom: 1px solid #222227 !important; }
#content td { padding: 11px 14px !important; border-bottom: 1px solid #1c1c21 !important; vertical-align: middle !important; word-break: break-word !important; }
#content tr:last-child td { border-bottom: none !important; }
#content th { background: #17171b !important; color: #ff6a1a !important; font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-align: left !important; padding: 12px 14px !important; border-bottom: 1px solid #222227 !important; }
#content td { padding: 11px 14px !important; border-bottom: 1px solid #1c1c21 !important; vertical-align: middle !important; }
#content tr:last-child td { border-bottom: none !important; }
#content table[style*="width"] { table-layout: auto !important; }
/* forms */
#content input[type=text], #content input[type=password], #content select, #content textarea { background: #0a0a0c !important; border: 1px solid #2a2a30 !important; color: #fff !important; border-radius: 9px !important; padding: 9px 12px !important; font-family: "JetBrains Mono", monospace !important; font-size: 13px !important; }
#content input:focus, #content select:focus, #content textarea:focus { outline: none !important; border-color: #ff6a1a !important; box-shadow: 0 0 0 3px rgba(255,106,26,.15) !important; }
#content input[type=submit], #content input[type=button], #content button { background: #ff6a1a !important; color: #0a0a0c !important; border: none !important; border-radius: 9px !important; padding: 9px 22px !important; font-weight: 700 !important; cursor: pointer !important; font-family: "Space Grotesk", sans-serif !important; }
#content input[type=submit]:hover { background: #ff8c42 !important; }
#content label { color: #a7a6a1 !important; font-size: 13px !important; }
#content code, #content pre { font-family: "JetBrains Mono", monospace !important; color: #ff6a1a !important; background: #141417 !important; border-radius: 6px !important; }
#content pre { padding: 14px 16px !important; overflow-x: auto !important; }
/* cocks.io v4 — authenticated navigation */
/* The landing page remains unchanged. This stylesheet only restyles the logged-in menu. */

#menu {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#menu ul.nav {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#menu li {
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (min-width: 901px) {
	#main.auth-layout {
		display: grid !important;
		grid-template-columns: 220px minmax(0, 1fr) !important;
		column-gap: 38px !important;
		align-items: start !important;
	}

	#menu {
		position: sticky !important;
		top: 24px !important;
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 220px !important;
		margin: 32px 0 0 !important;
		padding: 20px 18px 30px 0 !important;
		border-right: 1px solid #222228 !important;
	}

	#menu::before {
		content: "Navigation" !important;
		display: block !important;
		margin: 0 0 18px 2px !important;
		color: #5f5f68 !important;
		font-family: "JetBrains Mono", monospace !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		letter-spacing: .18em !important;
		text-transform: uppercase !important;
	}

	#menu ul.nav {
		display: grid !important;
		gap: 25px !important;
	}

	#menu li.topitem {
		position: relative !important;
		width: 100% !important;
	}

	#menu li.topitem > a,
	#menu li.topitem > span.title {
		display: block !important;
		width: 100% !important;
		padding: 0 2px 8px !important;
		margin: 0 !important;
		border: 0 !important;
		color: #9f9e99 !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		letter-spacing: .01em !important;
		line-height: 1.35 !important;
	}

	#menu li.topitem > a:hover,
	#menu li.topitem > span.title:hover {
		color: #ffffff !important;
	}

	#menu li.topitem.active > a {
		color: #ff6a1a !important;
		border-bottom: 2px solid #ff6a1a !important;
		padding-bottom: 6px !important;
	}

	#menu li.parent > span.title {
		padding-bottom: 9px !important;
		border-bottom: 1px solid #292931 !important;
		color: #ffffff !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		letter-spacing: .16em !important;
		text-transform: uppercase !important;
	}

	#menu li.parent > ul {
		display: grid !important;
		gap: 4px !important;
		margin: 9px 0 0 !important;
		padding: 0 0 0 12px !important;
		border: 0 !important;
		border-left: 1px solid #2a2a31 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	#menu li.parent > ul > li {
		width: 100% !important;
	}

	#menu li.parent > ul > li > a {
		display: flex !important;
		align-items: center !important;
		min-height: 34px !important;
		padding: 7px 10px !important;
		border: 0 !important;
		border-radius: 8px !important;
		color: #a7a6a1 !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		transition: color .15s ease, background .15s ease, box-shadow .15s ease !important;
	}

	#menu li.parent > ul > li > a::before {
		content: "" !important;
		flex: 0 0 5px !important;
		width: 5px !important;
		height: 5px !important;
		margin: 0 10px 0 0 !important;
		border-radius: 50% !important;
		background: #55555e !important;
	}

	#menu li.parent > ul > li > a:hover {
		color: #ffffff !important;
		background: #151519 !important;
	}

	#menu li.parent > ul > li > a:hover::before {
		background: #ff6a1a !important;
	}

	#menu li.parent > ul > li.active > a {
		color: #ffffff !important;
		background: #18181d !important;
		box-shadow: inset 2px 0 0 #ff6a1a !important;
	}

	#menu li.parent > ul > li.active > a::before {
		background: #ff6a1a !important;
	}

	#menu li.parent > ul > li ul {
		display: grid !important;
		gap: 2px !important;
		margin: 3px 0 0 9px !important;
		padding: 0 0 0 10px !important;
		border: 0 !important;
		border-left: 1px solid #292931 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	#menu li.parent > ul > li ul a {
		min-height: 30px !important;
		padding: 6px 9px !important;
		border: 0 !important;
		border-radius: 7px !important;
		color: #85847f !important;
		font-size: 12px !important;
	}

	#menu li.parent > ul > li ul a::before {
		display: none !important;
	}

	#menu li.parent > ul > li ul a:hover,
	#menu li.parent > ul > li ul a.active {
		color: #ffffff !important;
		background: #17171b !important;
	}

	#menu a:focus-visible,
	#menu span.title:focus-visible {
		outline: 2px solid #ff8c42 !important;
		outline-offset: 3px !important;
	}

	#content {
		grid-column: 2 !important;
		grid-row: 1 !important;
		min-width: 0 !important;
	}

	#breadcrumb {
		margin-top: 2px !important;
	}
}

@media (max-width: 900px) {
	#main {
		display: block !important;
	}

	#menu {
		width: auto !important;
		margin: 26px 0 22px !important;
		padding: 0 0 18px !important;
		border-right: 0 !important;
		border-bottom: 1px solid #222228 !important;
	}

	#menu::before {
		content: "Navigation" !important;
		display: block !important;
		margin: 0 0 14px 2px !important;
		color: #5f5f68 !important;
		font-family: "JetBrains Mono", monospace !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		letter-spacing: .18em !important;
		text-transform: uppercase !important;
	}

	#menu ul.nav {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
		gap: 18px 24px !important;
	}

	#menu li.topitem > a,
	#menu li.topitem > span.title {
		display: block !important;
		padding: 0 0 8px !important;
	}

	#menu li.topitem.active > a {
		border-bottom: 2px solid #ff6a1a !important;
		padding-bottom: 6px !important;
	}

	#menu li.parent > span.title {
		padding-bottom: 8px !important;
		border-bottom: 1px solid #292931 !important;
		font-size: 10px !important;
		letter-spacing: .14em !important;
		text-transform: uppercase !important;
	}

	#menu li.parent > ul {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
		gap: 4px !important;
		margin: 8px 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	#menu li.parent > ul > li > a {
		min-height: 34px !important;
		padding: 7px 9px !important;
		border-radius: 7px !important;
	}

	#menu li.parent > ul > li > a::before {
		margin-right: 8px !important;
	}

	#menu li.parent > ul > li ul {
		margin-left: 7px !important;
		padding-left: 9px !important;
	}
}

@media (max-width: 560px) {
	#menu ul.nav,
	#menu li.parent > ul {
		grid-template-columns: 1fr !important;
	}
}

/* ---- cocks v4.1: modern form controls + scrollbar (additive, v3 stays base) ---- */
:root {
	color-scheme: dark;
}

#content select,
#infobar select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: #0a0a0c !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ff6a1a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	border: 1px solid #2a2a30 !important;
	border-radius: 9px !important;
	color: #fff !important;
	padding: 9px 34px 9px 12px !important;
	font-family: "JetBrains Mono", monospace !important;
	font-size: 13px !important;
	max-width: 100% !important;
	cursor: pointer !important;
}

#content select:hover,
#infobar select:hover {
	border-color: #3a3a42 !important;
}

#content select:focus,
#infobar select:focus {
	outline: none !important;
	border-color: #ff6a1a !important;
	box-shadow: 0 0 0 3px rgba(255,106,26,.15) !important;
}

#content option {
	background: #121215 !important;
	color: #e8e6e1 !important;
}

#content textarea {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 90px !important;
	line-height: 1.55 !important;
	resize: vertical !important;
}

#content input[type=checkbox],
#content input[type=radio] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	border: 1px solid #3a3a42 !important;
	border-radius: 5px !important;
	background: #0a0a0c !important;
	cursor: pointer !important;
	vertical-align: -3px !important;
	position: relative !important;
}

#content input[type=radio] {
	border-radius: 50% !important;
}

#content input[type=checkbox]:hover,
#content input[type=radio]:hover {
	border-color: #ff6a1a !important;
}

#content input[type=checkbox]:checked {
	background: #ff6a1a !important;
	border-color: #ff6a1a !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%230a0a0c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

#content input[type=radio]:checked {
	border-color: #ff6a1a !important;
	background: radial-gradient(circle, #ff6a1a 0 4px, #0a0a0c 4.5px) !important;
}

#content input[type=checkbox]:focus-visible,
#content input[type=radio]:focus-visible,
#content select:focus-visible {
	outline: 2px solid #ff8c42 !important;
	outline-offset: 2px !important;
}

/* custom scrollbar that slaps, dark + orange */
* {
	scrollbar-width: thin !important;
	scrollbar-color: #ff6a1a #0a0a0c !important;
}

*::-webkit-scrollbar {
	width: 10px !important;
	height: 10px !important;
}

*::-webkit-scrollbar-track {
	background: #0a0a0c !important;
}

*::-webkit-scrollbar-thumb {
	background: #2a2a30 !important;
	border-radius: 8px !important;
	border: 2px solid #0a0a0c !important;
}

*::-webkit-scrollbar-thumb:hover {
	background: #ff6a1a !important;
}

*::-webkit-scrollbar-corner {
	background: #0a0a0c !important;
}

/* ---- cocks v6: category vs page, footer glow ---- */
/* module titles are categories: purple path */
#menu li.parent > ul > li.modtitle > a {
	color: #a5f3fc !important;
	font-weight: 600 !important;
}

#menu li.parent > ul > li.modtitle > a::before {
	background: #22d3ee !important;
}

#menu li.parent > ul > li.modtitle > a:hover {
	color: #fff !important;
	background: #101e22 !important;
}

#menu li.parent > ul > li.modtitle > a:hover::before {
	background: #67e8f9 !important;
	box-shadow: 0 0 8px rgba(103,232,249,.9) !important;
}

/* module main page open: purple active */
#menu li.parent > ul > li.modtitle.active > a {
	color: #fff !important;
	background: #0e2a30 !important;
	box-shadow: inset 2px 0 0 #22d3ee !important;
}

#menu li.parent > ul > li.modtitle.active > a::before {
	background: #67e8f9 !important;
	box-shadow: 0 0 8px rgba(103,232,249,.9) !important;
}

/* subpage open: module steps back to purple path, page gets orange */
#menu li.parent > ul > li.modtitle.active:has(> ul li.subitem.active) > a {
	color: #67e8f9 !important;
	background: transparent !important;
	box-shadow: inset 2px 0 0 #22d3ee !important;
}

#menu li.parent > ul > li ul li.subitem.active > a {
	color: #fff !important;
	background: #1f1410 !important;
	box-shadow: inset 2px 0 0 #ff6a1a !important;
}

/* ---- cocks v7: banner logo ---- */
.ck-banner {
	gap: 12px !important;
}

.ck-logo {
	display: inline-flex !important;
	line-height: 0 !important;
}

.ck-logo img {
	width: 34px !important;
	height: 34px !important;
	border-radius: 9px !important;
	box-shadow: 0 0 20px rgba(255,106,26,.35) !important;
}

/* ---- cocks v8: warm drifting light, card glow, table fit, cyan ---- */
/* animated warm background light, slow drift */
#wrapper::before {
	background-size: 200% 100% !important;
	animation: ck-drift 14s ease-in-out infinite !important;
}

@keyframes ck-drift {
	0%, 100% { background-position: 20% 0 !important; }
	50% { background-position: 80% 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	#wrapper::before {
		animation: none !important;
	}
}

/* landing cards: glow + lift on hover */
.ck-card {
	position: relative !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
	overflow: hidden !important;
	text-decoration: none !important;
	display: block !important;
}
/* CTA card: permanent orange glow */
a.ck-card-cta {
	border-color: #ff6a1a33 !important;
	box-shadow: 0 0 20px rgba(255,106,26,.08), inset 0 2px 0 #ff6a1a !important;
}
a.ck-card-cta::after {
	opacity: 1 !important;
}
a.ck-card-cta:hover {
	transform: translateY(-3px) !important;
	border-color: #ff6a1a !important;
	box-shadow: 0 10px 36px rgba(255,106,26,.2), 0 2px 10px rgba(255,106,26,.1) !important;
}
.ck-cta-label { display: inline-block; margin-top: 12px; color: #ff6a1a; font-weight: 700; font-size: 14px; }

.ck-card::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 0 auto 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, transparent, #ff6a1a, #22d3ee, transparent) !important;
	opacity: 0 !important;
	transition: opacity .25s ease !important;
	pointer-events: none !important;
}

.ck-card:hover {
	transform: translateY(-3px) !important;
	border-color: #ff6a1a !important;
	box-shadow: 0 10px 36px rgba(255,106,26,.16), 0 2px 10px rgba(34,211,238,.08) !important;
}

.ck-card:hover::after {
	opacity: 1 !important;
}

/* wide admin tables fit the content column, no double scrollbar */
#content th,
#content td {
	overflow-wrap: anywhere !important;
}

#content th {
	padding: 10px 12px !important;
	white-space: nowrap !important;
}

#content td {
	padding: 9px 12px !important;
	vertical-align: top !important;
}

#content table {
	table-layout: auto !important;
	max-width: 100% !important;
}

/* footer credit follows the cyan accent */
#footerbar .ninja {
	background: linear-gradient(90deg, #ff6a1a, #22d3ee) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	font-weight: 700 !important;
	filter: drop-shadow(0 0 6px rgba(255,106,26,.55)) drop-shadow(0 0 10px rgba(34,211,238,.3)) !important;
}
/* flags / checkbox grid in user edit */
.flags label { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 8px 8px 0 !important; padding: 6px 12px !important; background: #17171b !important; border: 1px solid #222227 !important; border-radius: 8px !important; font-size: 13px !important; color: #d6d3cd !important; cursor: pointer !important; white-space: nowrap !important; }
.flags label:hover { border-color: #ff6a1a !important; }
.flags input[type=checkbox] { accent-color: #ff6a1a !important; }