/*
 * SHARKK DESIGN SYSTEM
 * Standalone CSS — complete component library
 *
 * Gradients (45deg dark→light):
 *   Blue:   #2253B6 → #12AEF5
 *   Green:  #02B447 → #61CB36
 *   Yellow: #F2994A → #F2C94C
 *   Error:  #b31217 → #e52d27
 *   Indigo: #4E52E8 → #A07AFF
 */

/* ═══════ RESET ═══════ */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
	margin-block-end: 0;
}

body {
	line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
	line-height: 1.1;
}

img, picture {
	max-width: 100%;
	display: block;
}

input, button, textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* ═══════ PALETTE ═══════ */

:root {
	--r: 2px;

	--blue-100: #D8E2F4;
	--blue-200: #A8BDE4;
	--blue-300: #6888CC;
	--blue-400: #2253B6;
	--blue-500: #1C469A;
	--blue-600: #163A80;
	--blue-700: #102E68;

	--cyan-100: #D4F2FC;
	--cyan-200: #8AE0F9;
	--cyan-300: #4ECEF7;
	--cyan-400: #12AEF5;
	--cyan-500: #0E98D8;
	--cyan-600: #0A80B8;
	--cyan-700: #066898;

	--green-100: #E8F8E0;
	--green-200: #C4EDC0;
	--green-300: #92DA7B;
	--green-400: #61CB36;
	--green-500: #32BD3E;
	--green-600: #02B447;
	--green-700: #019238;
	--green-800: #00742C;

	--yellow-100: #FDE8D4;
	--yellow-200: #F8D4AA;
	--yellow-300: #F5B67A;
	--yellow-400: #F2994A;
	--yellow-500: #F2B14B;
	--yellow-600: #F2C94C;
	--yellow-700: #D4A830;
	--yellow-800: #B08818;

	--error-100: #FCE0DF;
	--error-200: #F5B0AE;
	--error-300: #ED706C;
	--error-400: #e52d27;
	--error-500: #CC201F;
	--error-600: #b31217;
	--error-700: #8E0E12;
	--error-800: #6A0A0E;

	--indigo-100: #ECE4FF;
	--indigo-200: #D4C4FF;
	--indigo-300: #BA9EFF;
	--indigo-400: #A07AFF;
	--indigo-500: #7866F4;
	--indigo-600: #4E52E8;
	--indigo-700: #3840C8;
	--indigo-800: #2830A8;

	--g-blue: linear-gradient(45deg, var(--blue-400), var(--cyan-400));
	--g-green: linear-gradient(45deg, var(--green-600), var(--green-400));
	--g-yellow: linear-gradient(45deg, var(--yellow-400), var(--yellow-600));
	--g-error: linear-gradient(45deg, var(--error-600), var(--error-400));
	--g-indigo: linear-gradient(45deg, var(--indigo-600), var(--indigo-400));

	--glow-blue: 0px 2px 12px rgba(34, 83, 182, 0.5);
	--glow-green: 0px 2px 12px rgba(97, 203, 54, 0.45);
	--glow-yellow: 0px 2px 12px rgba(242, 153, 74, 0.45);
	--glow-error: 0px 2px 12px rgba(229, 45, 39, 0.45);
	--glow-indigo: 0px 2px 12px rgba(160, 122, 255, 0.45);

	--bg: #1a1a1a;
	--card: #222;
	--elevated: #2a2a2a;
	--border: #2a2a2a;

	--ov2: rgba(255, 255, 255, 0.06);
	--ov3: rgba(255, 255, 255, 0.10);

	--t1: #efefef;
	--t2: #b0b0b0;
	--t3: #828791;
	--t4: #555;
	--link: #12AEF5;

	--shadow-sm: 0px 1px 4px rgba(0, 0, 0, 0.2);
	--shadow-md: 0px 2px 10px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0px 4px 20px rgba(0, 0, 0, 0.35);
	--shadow-xl: 0px 8px 40px rgba(0, 0, 0, 0.45);

	--font-sans: 'Montserrat', system-ui, sans-serif;
	--font-serif: 'Merriweather', Georgia, serif;
	--font-mono: 'Comic Code', 'Courier New', monospace;

	font-size: 100%;
	font-family: var(--font-sans);
}

body {
	background: var(--bg);
	color: var(--t1);
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* ═══════ DS PAGE LAYOUT ═══════ */

.ds-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.ds-section {
	margin-bottom: 2.5rem;
}

.ds-section-title {
	font-size: 1.1rem;
	font-weight: 900;
	margin-bottom: 0.25rem;
	background: var(--g-blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ds-section-bar {
	height: 2px;
	background: var(--g-blue);
	margin-bottom: 1.25rem;
	border-radius: 1px;
}

.ds-sub {
	margin-bottom: 1.25rem;
}

.ds-sub-title {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--t3);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 0.625rem;
}

.ds-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ds-row.tight {
	gap: 0.375rem;
}

.ds-row.loose {
	gap: 1rem;
}

.ds-row.center {
	align-items: center;
}

.ds-row.end {
	align-items: flex-end;
}

.ds-col {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ds-col.tight {
	gap: 0.375rem;
}

.ds-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.ds-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.25rem;
}

/* ═══════ STICKY HEADER ═══════ */

.ds-header {
	background: var(--card);
	box-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: 100;
}

.ds-header::before {
	content: '';
	display: block;
	height: 3px;
	background: var(--g-blue);
}

.ds-header-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 1.5rem;
	gap: 1rem;
}

.ds-header-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ds-header-logo .icon {
	width: 28px;
	height: 28px;
	border-radius: var(--r);
	background: var(--g-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: white;
	font-size: 0.9rem;
}

.ds-header-logo .title {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.5px;
}

.ds-header-logo .sub {
	color: var(--t4);
	font-weight: 400;
}

.ds-header-nav {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--t4) transparent;
}

.ds-header-nav::-webkit-scrollbar {
	height: 3px;
}

.ds-header-nav::-webkit-scrollbar-track {
	background: transparent;
}

.ds-header-nav::-webkit-scrollbar-thumb {
	background: var(--t4);
	border-radius: 2px;
}

.ds-header-nav a {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--t3);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.25rem 0.375rem;
	border-radius: var(--r);
	transition: color 0.1s;
}

.ds-header-nav a:hover {
	color: var(--t1);
	text-decoration: none;
}

/* ═══════ PALETTE SWATCHES ═══════ */

.swatch-strip {
	display: flex;
	gap: 2px;
	margin-bottom: 0.75rem;
}

.swatch-strip-label {
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--t3);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.swatch {
	flex: 1;
	text-align: center;
}

.swatch-color {
	height: 28px;
	border-radius: var(--r);
}

.swatch-name {
	font-size: 0.5rem;
	color: var(--t4);
	font-family: var(--font-mono);
	margin-top: 2px;
}

.grad-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.grad-bar {
	width: 80px;
	height: 28px;
	border-radius: var(--r);
}

.grad-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--t2);
}

/* ═══════ CARDS ═══════ */

.card {
	background: var(--card);
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
}

.card-pad {
	padding: 1rem;
}

.card-elevated {
	background: var(--elevated);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
}

.card-gradient {
	background: var(--g-blue);
	border-radius: var(--r);
	box-shadow: var(--glow-blue);
	color: white;
}

.card-light {
	background: #efefef;
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	color: #222;
}

.card-interactive {
	transition: background 0.1s;
	cursor: pointer;
}

.card-interactive:hover {
	background: var(--elevated);
}

.card-gradient-top {
	overflow: hidden;
}

.card-gradient-top::before {
	content: '';
	display: block;
	height: 3px;
	background: var(--g-blue);
}

.card-label {
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--t3);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
}

.card-heading {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.card-body {
	font-size: 0.85rem;
	color: var(--t2);
}

/* ═══════ BUTTONS ═══════ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4375rem 0.875rem;
	border-radius: var(--r);
	border: none;
	font-weight: 700;
	font-size: 0.8rem;
	font-family: inherit;
	cursor: pointer;
	transition: filter 0.1s;
	color: white;
	text-decoration: none;
}

.btn:hover {
	filter: brightness(1.08);
	text-decoration: none;
}

.btn-blue {
	background: var(--g-blue);
	box-shadow: var(--glow-blue);
}

.btn-green {
	background: var(--g-green);
	box-shadow: var(--glow-green);
}

.btn-yellow {
	background: var(--g-yellow);
	box-shadow: var(--glow-yellow);
}

.btn-error {
	background: var(--g-error);
	box-shadow: var(--glow-error);
}

.btn-indigo {
	background: var(--g-indigo);
	box-shadow: var(--glow-indigo);
}

.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.7rem;
}

.btn-ghost {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--t2);
	box-shadow: none;
}

.btn-ghost:hover {
	background: var(--ov2);
	color: var(--t1);
	filter: none;
}

.btn-disabled {
	opacity: 0.5;
	cursor: default;
	filter: none !important;
}

.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--r);
	border: none;
	background: var(--ov2);
	color: var(--t3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.1s;
}

.btn-icon:hover {
	background: var(--ov3);
	color: var(--t1);
}

.pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	height: 24px;
	padding: 0 0.5rem;
	border-radius: var(--r);
	border: none;
	background: var(--ov2);
	color: var(--t3);
	font-size: 0.75rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.1s;
}

.pill-btn:hover {
	background: var(--ov3);
	color: var(--t1);
}

/* ═══════ BADGES & TAGS ═══════ */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.0625rem 0.375rem;
	border-radius: var(--r);
	font-size: 0.65rem;
	font-weight: 800;
}

.badge-blue {
	background: var(--g-blue);
	color: white;
}

.badge-green {
	background: var(--g-green);
	color: white;
}

.badge-yellow {
	background: var(--g-yellow);
	color: white;
}

.badge-error {
	background: var(--g-error);
	color: white;
}

.badge-indigo {
	background: var(--g-indigo);
	color: white;
}

.badge-muted {
	background: var(--ov2);
	color: var(--t3);
}

.badge-gt {
	font-weight: 800;
}

.badge-gt > span {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.badge-gt.success {
	background: rgba(97, 203, 54, 0.15);
}

.badge-gt.success > span {
	background-image: var(--g-green);
}

.badge-gt.warning {
	background: rgba(242, 153, 74, 0.15);
}

.badge-gt.warning > span {
	background-image: var(--g-yellow);
}

.badge-gt.error {
	background: rgba(229, 45, 39, 0.15);
}

.badge-gt.error > span {
	background-image: var(--g-error);
}

.badge-gt.info {
	background: rgba(160, 122, 255, 0.15);
}

.badge-gt.info > span {
	background-image: var(--g-indigo);
}

.tag {
	padding: 0 0.375rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--t3);
	background: var(--ov2);
	border-radius: var(--r);
	display: inline-block;
}

.rank {
	background: var(--g-blue);
	color: white;
	padding: 0 0.25rem;
	border-radius: var(--r);
	font-size: 0.65rem;
	font-weight: 900;
}

/* ═══════ AVATARS ═══════ */

.avatar {
	border-radius: 100%;
	background: var(--g-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: white;
	flex-shrink: 0;
}

.av-24 {
	width: 24px;
	height: 24px;
	font-size: 9px;
}

.av-28 {
	width: 28px;
	height: 28px;
	font-size: 11px;
}

.av-32 {
	width: 32px;
	height: 32px;
	font-size: 12px;
}

.av-36 {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

.av-40 {
	width: 40px;
	height: 40px;
	font-size: 15px;
}

.av-48 {
	width: 48px;
	height: 48px;
	font-size: 19px;
}

.av-56 {
	width: 56px;
	height: 56px;
	font-size: 22px;
}

.av-72 {
	width: 72px;
	height: 72px;
	font-size: 28px;
}

.avatar-wrap {
	position: relative;
	display: inline-block;
}

.avatar-dot {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 2px solid var(--card);
}

.avatar-dot.online {
	background: var(--green-400);
}

.avatar-dot.offline {
	background: var(--t4);
}

.contrib-stack {
	display: flex;
}

.contrib-stack .avatar {
	margin-left: -4px;
	border: 2px solid var(--bg);
}

.contrib-stack .avatar:first-child {
	margin-left: 0;
}

/* ═══════ FORMS ═══════ */

.form-field {
	margin-bottom: 1rem;
}

.form-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--t3);
	margin-bottom: 0.3rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: var(--ov2);
	border: 1px solid var(--border);
	border-radius: var(--r);
	color: var(--t1);
	font-size: 0.875rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
	border-color: var(--blue-400);
	box-shadow: 0 0 0 2px rgba(34, 83, 182, 0.25);
}

.form-input::placeholder {
	color: var(--t4);
}

textarea.form-input {
	resize: vertical;
	min-height: 4em;
	line-height: 1.5;
}

.form-check {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--t2);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--t4);
	background: var(--ov2);
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition: border-color 0.15s, background 0.15s;
}

.form-check input[type="checkbox"] {
	border-radius: var(--r);
}

.form-check input[type="checkbox"]:checked {
	background: var(--g-blue);
	border-color: transparent;
}

.form-check input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4.5px;
	top: 1.5px;
	width: 5px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.form-check input[type="radio"] {
	border-radius: 50%;
}

.form-check input[type="radio"]:checked {
	border-color: var(--blue-400);
}

.form-check input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--g-blue);
}

.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible {
	box-shadow: 0 0 0 2px rgba(34, 83, 182, 0.25);
	outline: none;
}

/* ═══════ CUSTOM SELECT ═══════ */

.select-wrap {
	position: relative;
}

.select-trigger {
	width: 100%;
	padding: 0.5rem 0.75rem;
	padding-right: 2rem;
	background: var(--ov2);
	border: 1px solid var(--border);
	border-radius: var(--r);
	color: var(--t1);
	font-size: 0.875rem;
	font-family: inherit;
	cursor: pointer;
	outline: none;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
	display: flex;
	align-items: center;
}

.select-trigger::after {
	content: '';
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-top: 5px solid var(--t3);
}

.select-trigger.open {
	border-color: var(--blue-400);
	box-shadow: 0 0 0 2px rgba(34, 83, 182, 0.25);
}

.select-trigger.open::after {
	border-top: none;
	border-bottom: 5px solid var(--t3);
}

.select-trigger.placeholder {
	color: var(--t4);
}

.select-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--elevated);
	border: 1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	z-index: 50;
	display: none;
	max-height: 200px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--t4) transparent;
}

.select-dropdown.open {
	display: block;
}

.select-option {
	padding: 0.4375rem 0.75rem;
	font-size: 0.85rem;
	color: var(--t2);
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
}

.select-option:hover {
	background: var(--ov2);
	color: var(--t1);
}

.select-option.selected {
	background: var(--g-blue);
	color: white;
	font-weight: 600;
}

.form-check input {
	accent-color: var(--blue-400);
	cursor: pointer;
}

.toggle {
	width: 36px;
	height: 20px;
	border-radius: 10px;
	background: #333;
	position: relative;
	cursor: pointer;
	transition: background 0.15s;
	display: inline-block;
}

.toggle.on {
	background: var(--g-green);
}

.toggle::after {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: white;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: left 0.15s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle.on::after {
	left: 18px;
}

/* ═══════ NAV ═══════ */

.nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.4rem 0.5rem;
	border-radius: var(--r);
	color: var(--t2);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	background: transparent;
	border: none;
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	transition: all 0.1s;
	margin-bottom: 1px;
}

.nav-link:hover {
	background: var(--ov2);
	color: var(--t1);
	text-decoration: none;
}

.nav-link.active {
	background: var(--g-blue);
	color: white;
	font-weight: 700;
}

.tab-bar {
	display: flex;
	border-bottom: 1px solid var(--border);
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 0.75rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--t3);
	cursor: pointer;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: inherit;
	transition: all 0.1s;
}

.tab-item:hover {
	color: var(--t1);
	background: rgba(255, 255, 255, 0.02);
}

.tab-item.active {
	color: var(--link);
	border-bottom-color: var(--link);
}

.filter-bar {
	display: flex;
	overflow: hidden;
}

.filter-bar > * {
	flex: 1;
	text-align: center;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--t1);
	cursor: pointer;
	background: transparent;
	border: none;
	font-family: inherit;
	transition: all 0.1s;
}

.filter-bar > *:hover {
	background: var(--ov2);
}

.filter-bar > *.active {
	background: var(--g-blue);
	color: white;
	font-weight: 700;
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8rem;
}

.breadcrumb .sep {
	color: var(--t4);
}

.breadcrumb .current {
	color: var(--t2);
	font-weight: 600;
}

.pagination {
	display: flex;
	gap: 0.25rem;
}

.page-btn {
	min-width: 28px;
	height: 28px;
	border-radius: var(--r);
	border: none;
	background: var(--ov2);
	color: var(--t2);
	font-weight: 700;
	font-size: 0.75rem;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.375rem;
}

.page-btn:hover {
	background: var(--ov3);
	color: var(--t1);
}

.page-btn.active {
	background: var(--g-blue);
	color: white;
}

/* ═══════ ALERTS ═══════ */

.alert {
	display: flex;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	background: var(--card);
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	border-left: 3px solid;
	margin-bottom: 0.5rem;
}

.alert-icon {
	font-size: 1.25rem;
	line-height: 1;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.alert-title {
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 0.125rem;
}

.alert-msg {
	font-size: 0.8rem;
	color: var(--t3);
}

.alert-success {
	border-left-color: var(--green-400);
}

.alert-success .alert-icon {
	background-image: var(--g-green);
}

.alert-warning {
	border-left-color: var(--yellow-400);
}

.alert-warning .alert-icon {
	background-image: var(--g-yellow);
}

.alert-error {
	border-left-color: var(--error-400);
}

.alert-error .alert-icon {
	background-image: var(--g-error);
}

.alert-info {
	border-left-color: var(--indigo-400);
}

.alert-info .alert-icon {
	background-image: var(--g-indigo);
}

/* ═══════ PROGRESS ═══════ */

.progress-bar {
	height: 6px;
	background: #333;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 0.625rem;
}

.progress-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.3s;
}

.pf-blue {
	background: var(--g-blue);
}

.pf-green {
	background: var(--g-green);
}

.pf-yellow {
	background: var(--g-yellow);
}

.pf-error {
	background: var(--g-error);
}

.spinner {
	border: 2px solid var(--ov3);
	border-top-color: var(--blue-400);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.skeleton {
	background: linear-gradient(90deg, #2a2a2a 0px, #333 50%, #2a2a2a 100%);
	background-size: 400px 100%;
	animation: skel 1.2s ease-in-out infinite;
	border-radius: var(--r);
}

@keyframes skel {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

/* ═══════ TABLE ═══════ */

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.data-table th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 2px solid var(--border);
	color: var(--t3);
	font-weight: 700;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.data-table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	color: var(--t2);
}

.data-table tr:hover td {
	background: var(--ov2);
}

/* ═══════ TOOLTIP ═══════ */

.tooltip-wrap {
	position: relative;
	display: inline-block;
}

.tooltip-wrap .tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--t1);
	color: var(--card);
	padding: 0.25rem 0.5rem;
	border-radius: var(--r);
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	box-shadow: var(--shadow-md);
}

.tooltip-wrap .tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--t1);
}

.tooltip-wrap:hover .tooltip {
	opacity: 1;
}

/* ═══════ MODAL ═══════ */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 200;
}

.modal-overlay.open {
	display: flex;
}

.modal {
	background: var(--elevated);
	border-radius: var(--r);
	box-shadow: var(--shadow-xl);
	padding: 1.25rem;
	max-width: 420px;
	width: 90%;
	animation: fadeUp 0.2s ease;
}

/* ═══════ SHADOW/GLOW BOXES ═══════ */

.shadow-box {
	width: 80px;
	height: 80px;
	background: var(--card);
	border-radius: var(--r);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--t3);
}

.glow-box {
	width: 80px;
	height: 80px;
	border-radius: var(--r);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	font-weight: 800;
	color: white;
}

/* ═══════ FEED POST ═══════ */

.post {
	background: var(--card);
	border: 1px solid var(--border);
	border-bottom: none;
	padding: 1rem;
	display: flex;
	gap: 0.75rem;
}

.post:first-of-type {
	border-radius: var(--r) var(--r) 0 0;
}

.post:last-of-type {
	border-bottom: 1px solid var(--border);
	border-radius: 0 0 var(--r) var(--r);
}

.post:only-of-type {
	border-bottom: 1px solid var(--border);
	border-radius: var(--r);
}

.post-body {
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre-line;
	margin-bottom: 0.5rem;
}

.post-actions {
	display: flex;
	gap: 0;
	max-width: 400px;
	margin-left: -0.75rem;
}

.act-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border: none;
	border-radius: var(--r);
	background: transparent;
	color: var(--t3);
	font-size: 0.8rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.1s;
}

.act-btn:hover {
	color: var(--link);
	background: rgba(18, 174, 245, 0.06);
}

/* ═══════ UTILITY ═══════ */

.h-row {
	transition: background 0.1s;
	cursor: pointer;
	border-radius: var(--r);
}

.h-row:hover {
	background: rgba(255, 255, 255, 0.03);
}

.gradient-text {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gt-blue {
	background-image: var(--g-blue);
}

.gt-green {
	background-image: var(--g-green);
}

.gt-yellow {
	background-image: var(--g-yellow);
}

.gt-error {
	background-image: var(--g-error);
}

.gt-indigo {
	background-image: var(--g-indigo);
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ═══════ LOGO ═══════ */

.logo {
	display: inline-block;
	width: 1em;
	height: 1em;
	color: inherit;
}

.logo svg {
	width: 100%;
	height: 100%;
	display: block;
}

.logo-gradient {
	display: inline-block;
	background: var(--g-blue);
	-webkit-mask: url('sharkk.svg') center / contain no-repeat;
	mask: url('sharkk.svg') center / contain no-repeat;
}

/* ═══════ WORDMARK ═══════ */

.wordmark {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.5px;
}