/* BujiFort — design system.
   Dark is the default/fallback look; light mode is a first-class theme,
   not an afterthought. Precedence (see docs on each block below):
     1. :root[data-theme="light"|"dark"]   — explicit user choice (cookie, set by app.js)
     2. @media (prefers-color-scheme)      — OS preference, when no explicit choice exists
     3. :root (bare)                       — dark, the ultimate fallback
   Every color in this file is a variable so both themes stay in sync;
   never hardcode a hex value below the variable block. */

:root {
	color-scheme: dark;

	/* Surfaces — elevation layers, lightest to most-raised. */
	--bg: #0c0c0e;
	--surface-1: #131316;
	--surface-2: #19191d;
	--surface-3: #212126;
	--surface-hover: rgba(255, 255, 255, 0.06);
	--surface-active: rgba(255, 255, 255, 0.1);

	/* Text */
	--fg: #f4f4f6;
	--fg-muted: #9d9da6;
	--fg-subtle: #6c6c76;

	/* Borders */
	--border: rgba(255, 255, 255, 0.09);
	--border-strong: rgba(255, 255, 255, 0.18);

	/* Brand accent — red, kept for identity; gradient variant for
	   primary actions so it reads as an app, not just "the red site". */
	--accent: #e50914;
	--accent-2: #ff5c72;
	--accent-hover: #ff2c3a;
	--accent-fg: #ffffff;
	--accent-gradient: linear-gradient(135deg, #f5121f 0%, #e50914 45%, #c70b6b 100%);
	--accent-soft: rgba(229, 9, 20, 0.14);
	--accent-soft-strong: rgba(229, 9, 20, 0.24);
	--accent-ring: rgba(229, 9, 20, 0.35);

	--danger: #ff6b6b;
	--danger-soft: rgba(255, 90, 90, 0.14);
	--success: #3ddc84;
	--success-soft: rgba(61, 220, 132, 0.14);

	--input-bg: #202024;
	--input-bg-focus: #27272c;
	--overlay: rgba(6, 6, 8, 0.86);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
	--shadow-accent: 0 6px 20px rgba(229, 9, 20, 0.35);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	--sidebar-width: 252px;
	--sidebar-width-collapsed: 76px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* System preference, only when the user hasn't picked explicitly. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		color-scheme: light;
		--bg: #f6f6f8;
		--surface-1: #ffffff;
		--surface-2: #ffffff;
		--surface-3: #eef0f3;
		--surface-hover: rgba(15, 15, 20, 0.045);
		--surface-active: rgba(15, 15, 20, 0.08);
		--fg: #16161a;
		--fg-muted: #68686f;
		--fg-subtle: #9a9aa2;
		--border: rgba(15, 15, 20, 0.1);
		--border-strong: rgba(15, 15, 20, 0.18);
		--accent: #d6060f;
		--accent-2: #ff5c72;
		--accent-hover: #b8050d;
		--accent-fg: #ffffff;
		--accent-gradient: linear-gradient(135deg, #ef1120 0%, #d6060f 45%, #ad0a5c 100%);
		--accent-soft: rgba(214, 6, 15, 0.08);
		--accent-soft-strong: rgba(214, 6, 15, 0.14);
		--accent-ring: rgba(214, 6, 15, 0.25);
		--danger: #d6303a;
		--danger-soft: rgba(214, 48, 58, 0.1);
		--success: #148a54;
		--success-soft: rgba(20, 138, 84, 0.1);
		--input-bg: #eef0f3;
		--input-bg-focus: #e4e6ea;
		--overlay: rgba(20, 20, 24, 0.72);
		--shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
		--shadow-md: 0 6px 20px rgba(20, 20, 30, 0.08);
		--shadow-lg: 0 20px 50px rgba(20, 20, 30, 0.14);
		--shadow-accent: 0 6px 20px rgba(214, 6, 15, 0.2);
	}
}

/* Explicit override, set by the theme toggle (app.js writes hv_theme
   cookie + this attribute; the server echoes the cookie back into the
   very first response so there's no flash of the wrong theme). */
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f6f6f8;
	--surface-1: #ffffff;
	--surface-2: #ffffff;
	--surface-3: #eef0f3;
	--surface-hover: rgba(15, 15, 20, 0.045);
	--surface-active: rgba(15, 15, 20, 0.08);
	--fg: #16161a;
	--fg-muted: #68686f;
	--fg-subtle: #9a9aa2;
	--border: rgba(15, 15, 20, 0.1);
	--border-strong: rgba(15, 15, 20, 0.18);
	--accent: #d6060f;
	--accent-2: #ff5c72;
	--accent-hover: #b8050d;
	--accent-fg: #ffffff;
	--accent-gradient: linear-gradient(135deg, #ef1120 0%, #d6060f 45%, #ad0a5c 100%);
	--accent-soft: rgba(214, 6, 15, 0.08);
	--accent-soft-strong: rgba(214, 6, 15, 0.14);
	--accent-ring: rgba(214, 6, 15, 0.25);
	--danger: #d6303a;
	--danger-soft: rgba(214, 48, 58, 0.1);
	--success: #148a54;
	--success-soft: rgba(20, 138, 84, 0.1);
	--input-bg: #eef0f3;
	--input-bg-focus: #e4e6ea;
	--overlay: rgba(20, 20, 24, 0.72);
	--shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.06);
	--shadow-md: 0 6px 20px rgba(20, 20, 30, 0.08);
	--shadow-lg: 0 20px 50px rgba(20, 20, 30, 0.14);
	--shadow-accent: 0 6px 20px rgba(214, 6, 15, 0.2);
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	color: var(--fg);
	background:
		radial-gradient(1100px circle at 12% -12%, var(--accent-soft), transparent 55%),
		var(--bg);
	transition: background-color 0.3s ease, color 0.3s ease;
}

a {
	color: inherit;
}

a,
button,
input,
select,
.sidebar-nav a,
.sidebar-collapse-btn,
.theme-toggle-btn,
.table tbody tr {
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Thin, theme-aware scrollbars (WebKit/Blink; Firefox via the
   scrollbar-* properties). Purely cosmetic — native scrollbars still
   work fully everywhere this isn't supported. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--border-strong);
	border-radius: var(--radius-pill);
	border: 2px solid var(--bg);
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--fg-subtle);
}

input[type="checkbox"] {
	accent-color: var(--accent);
}

/* ---- Top loading bar + button loading state ---- */

.nprogress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--accent-gradient);
	z-index: 9999;
	opacity: 0;
	transition: width 0.4s ease, opacity 0.2s ease;
	pointer-events: none;
}

.nprogress-bar.visible {
	opacity: 1;
	box-shadow: 0 0 12px var(--accent-ring);
}

button.is-loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

button.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: btn-spin 0.6s linear infinite;
}

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

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

@keyframes pop-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---- Sidebar navigation ---- */

.app-shell {
	display: flex;
	min-height: 100vh;
}

.sidebar-toggle-checkbox {
	display: none;
}

.sidebar-backdrop {
	display: none;
}

.sidebar {
	display: flex;
	flex-direction: column;
	width: var(--sidebar-width);
	flex-shrink: 0;
	height: 100vh;
	position: sticky;
	top: 0;
	padding: 1.5rem 1.1rem;
	background: var(--surface-1);
	border-right: 1px solid var(--border);
	overflow-x: hidden;
	overflow-y: auto;
	transition: width 0.2s var(--ease), background-color 0.3s ease, border-color 0.3s ease;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	margin-bottom: 2rem;
	text-decoration: none;
}

.brand-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: var(--accent-gradient);
	box-shadow: var(--shadow-accent);
	color: #fff;
}

.brand-text {
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	color: var(--fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-nav {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
}

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.75rem;
	border-radius: var(--radius-sm);
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
}

.nav-icon {
	flex-shrink: 0;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus-visible {
	color: var(--fg);
	background: var(--surface-hover);
}

.sidebar-nav a.active {
	color: var(--accent);
	background: var(--accent-soft);
}

.sidebar-section-label {
	margin: 1.25rem 0 0.35rem;
	padding: 0 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--fg-subtle);
	text-transform: uppercase;
	white-space: nowrap;
}

.sidebar-group summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	border-radius: var(--radius-sm);
}

.sidebar-group summary::-webkit-details-marker {
	display: none;
}

.sidebar-group summary:hover {
	background: var(--surface-hover);
}

.sidebar-group-link {
	flex: 1;
	padding: 0.65rem 0 0.65rem 0.75rem !important;
	background: none !important;
}

.sidebar-group summary:hover .sidebar-group-link {
	color: var(--fg);
}

.chevron {
	display: inline-flex;
	flex-shrink: 0;
	margin-right: 0.6rem;
	color: var(--fg-muted);
	transition: transform 0.15s ease;
}

.sidebar-group[open] .chevron {
	transform: rotate(180deg);
}

.sidebar-subnav {
	display: flex;
	flex-direction: column;
	padding: 0.15rem 0 0.4rem 2.6rem;
}

.sidebar-subnav a {
	padding: 0.45rem 0.5rem;
	border-radius: var(--radius-sm);
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.86rem;
}

.sidebar-subnav a:hover,
.sidebar-subnav a:focus-visible {
	color: var(--fg);
	background: var(--surface-hover);
}

.sidebar-collapse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.5rem;
	color: var(--fg-muted);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	flex-shrink: 0;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
	color: var(--fg);
	border-color: var(--border-strong);
	background: var(--surface-hover);
}

.sidebar-collapse-btn svg {
	transition: transform 0.2s ease;
}

/* ---- Collapsed sidebar (desktop only — see media query below for the
   hamburger-driven mobile drawer, a separate mechanism) ---- */

.app-shell.sidebar-collapsed .sidebar {
	width: var(--sidebar-width-collapsed);
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.app-shell.sidebar-collapsed .label-text,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .chevron,
.app-shell.sidebar-collapsed .sidebar-subnav {
	display: none;
}

.app-shell.sidebar-collapsed .brand {
	justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-nav a,
.app-shell.sidebar-collapsed .sidebar-group-link {
	justify-content: center;
	padding-left: 0.6rem !important;
	padding-right: 0.6rem !important;
}

.app-shell.sidebar-collapsed .sidebar-collapse-btn svg {
	transform: rotate(180deg);
}

/* ---- Top bar (always visible: sidebar toggle on the left, theme
   toggle + user + logout on the right) ---- */

.app-main {
	flex: 1;
	min-width: 0;
}

.topbar {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.5rem;
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface-1);
	background: color-mix(in srgb, var(--surface-1) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.topbar-spacer {
	flex: 1;
}

.sidebar-toggle-btn {
	display: none;
	color: var(--fg);
	cursor: pointer;
}

.theme-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	color: var(--fg-muted);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
	color: var(--fg);
	border-color: var(--border-strong);
	background: var(--surface-hover);
}

.theme-icon-sun,
.theme-icon-moon {
	display: none;
}

/* Dark is the bare-:root fallback, so the moon (dark indicator) shows by
   default; the blocks below flip it whenever the effective theme (via
   explicit override or OS preference) is actually light. */
.theme-icon-moon {
	display: block;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .theme-icon-moon {
		display: none;
	}
	:root:not([data-theme]) .theme-icon-sun {
		display: block;
	}
}

:root[data-theme="light"] .theme-icon-moon {
	display: none;
}

:root[data-theme="light"] .theme-icon-sun {
	display: block;
}

:root[data-theme="dark"] .theme-icon-moon {
	display: block;
}

:root[data-theme="dark"] .theme-icon-sun {
	display: none;
}

.user-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.75rem 0.3rem 0.3rem;
	border-radius: var(--radius-pill);
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	max-width: 12rem;
}

.user-chip:hover,
.user-chip:focus-visible {
	color: var(--fg);
	background: var(--surface-hover);
}

.user-chip-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.user-chip-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--accent-gradient);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	object-fit: cover;
}

.logout-form {
	flex-shrink: 0;
}

.btn-logout {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	min-height: 2.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--fg);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.btn-logout:hover,
.btn-logout:focus-visible {
	border-color: var(--border-strong);
	background: var(--surface-hover);
}

/* ---- Layout ---- */

main {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 3vw 4rem;
	animation: content-fade-in 0.3s var(--ease);
}

/* ---- Home ---- */

.home-hero {
	max-width: 60rem;
	padding-top: 1rem;
}

.home-hero h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

.home-hero p {
	color: var(--fg-muted);
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 2rem;
	max-width: 40rem;
}

.quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.quick-link-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--fg);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.quick-link-card:hover,
.quick-link-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
}

.quick-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent);
}

.quick-link-card h2 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.quick-link-card p {
	font-size: 0.85rem;
	color: var(--fg-muted);
	margin: 0;
	line-height: 1.5;
}

/* ---- Login ---- */

.login-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem 1.25rem;
}

.login-theme-toggle {
	position: fixed;
	top: 1.25rem;
	right: 1.25rem;
}

.login {
	width: 100%;
	max-width: 25rem;
	padding: 2.5rem 2.25rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: pop-in 0.3s var(--ease);
}

.login-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	text-decoration: none;
}

.login h1 {
	margin: 0 0 1.5rem;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.login form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.login label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--fg-muted);
}

.login button {
	min-height: 3rem;
	margin-top: 0.5rem;
	padding: 0.85rem;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--accent-fg);
	background: var(--accent-gradient);
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	box-shadow: var(--shadow-accent);
	transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}

.login button:hover,
.login button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 10px 28px var(--accent-ring);
}

.login button:active {
	transform: translateY(0);
}

.error {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.88rem;
	color: var(--danger);
	background: var(--danger-soft);
	border-left: 3px solid var(--danger);
	border-radius: var(--radius-sm);
}

.notice {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.88rem;
	color: var(--success);
	background: var(--success-soft);
	border-left: 3px solid var(--success);
	border-radius: var(--radius-sm);
}

.optional {
	font-weight: 400;
	color: var(--fg-subtle);
	font-size: 0.8rem;
}

.text-muted {
	color: var(--fg-muted);
}

/* ---- Form controls (global — matches by type, not class, so every
   text-like input across every page/context looks consistent without
   needing a shared class added to each one) ---- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select {
	min-height: 2.75rem;
	padding: 0.65rem 0.9rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--fg);
	background: var(--input-bg);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
select:focus-visible {
	background: var(--input-bg-focus);
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder {
	color: var(--fg-subtle);
}

select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d9da6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 1rem;
	cursor: pointer;
}

/* ---- Buttons (generic) ---- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.6rem;
	padding: 0.55rem 1.15rem;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	color: var(--fg);
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), filter 0.15s var(--ease);
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary {
	color: var(--accent-fg);
	background: var(--accent-gradient);
	border-color: transparent;
	box-shadow: var(--shadow-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	filter: brightness(1.08);
	box-shadow: 0 8px 26px var(--accent-ring);
}

.btn-secondary {
	color: var(--fg);
	background: transparent;
	border-color: var(--border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	border-color: var(--border-strong);
	background: var(--surface-hover);
}

.btn-small {
	min-height: 2.15rem;
	padding: 0.35rem 0.8rem;
	font-size: 0.8rem;
	border-radius: calc(var(--radius-sm) - 2px);
}

.btn-danger {
	color: var(--danger);
	background: var(--danger-soft);
	border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus-visible {
	color: var(--accent-fg);
	background: var(--danger);
}

/* ---- Admin pages ---- */

.admin {
	max-width: 72rem;
}

.admin h1 {
	font-size: clamp(1.4rem, 3.5vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

.admin h2 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 2rem 0 0.75rem;
}

.admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.admin-form {
	max-width: 26rem;
}

.admin-form form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1.5rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.admin-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fg-muted);
}

.form-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.avatar-section {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 26rem;
	margin-top: 1rem;
	padding: 1.5rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.avatar-preview-wrap {
	flex-shrink: 0;
}

.avatar-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--accent-gradient);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	object-fit: cover;
}

.avatar-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	min-width: 0;
}

.avatar-upload-form {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.avatar-choose-btn {
	cursor: pointer;
}

.table-wrap {
	overflow-x: auto;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.table th,
.table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--border);
}

.table th {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.table th a {
	color: inherit;
	text-decoration: none;
}

.table tbody tr:last-child td {
	border-bottom: none;
}

.table tbody tr:hover {
	background: var(--surface-hover);
}

.table select {
	min-height: 2.25rem;
	padding: 0.35rem 1.9rem 0.35rem 0.6rem;
	font-size: 0.85rem;
}

.select-col {
	width: 2.5rem;
}

.inline-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.badge {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fg-muted);
	text-transform: capitalize;
	background: var(--surface-3);
	border-radius: var(--radius-pill);
}

.badge-active {
	color: var(--success);
	background: var(--success-soft);
}

.badge-muted {
	color: var(--fg-muted);
	background: var(--surface-3);
}

/* ---- Files ---- */

.files {
	max-width: 72rem;
}

.files-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.breadcrumbs {
	font-size: 1.05rem;
	font-weight: 700;
}

.breadcrumbs a {
	color: var(--fg);
	text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: var(--accent);
}

.crumb-sep {
	color: var(--fg-subtle);
	margin: 0 0.35rem;
}

.crumb-sep:last-child {
	display: none;
}

.area-switch {
	display: flex;
	gap: 0.35rem;
	font-size: 0.85rem;
	padding: 0.25rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
}

.area-switch a {
	padding: 0.4rem 0.9rem;
	border-radius: var(--radius-pill);
	color: var(--fg-muted);
	text-decoration: none;
	font-weight: 600;
}

.area-switch a:hover,
.area-switch a:focus-visible {
	color: var(--fg);
}

.area-switch a.active {
	color: var(--accent-fg);
	background: var(--accent-gradient);
}

.list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.mkdir-form {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.upload-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	width: 100%;
}

.dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: 100%;
	min-height: 11rem;
	padding: 2rem 1.5rem;
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.dropzone:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-sm);
}

.dropzone.is-dragover {
	border-color: var(--accent);
	border-style: solid;
	background: var(--accent-soft);
	transform: scale(1.015);
	box-shadow: var(--shadow-md);
}

.dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.dropzone-icon {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.7rem;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-pill);
	transition: transform 0.25s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
	/* Without this, .is-dragover's transform below gives the icon its own
	   stacking context, which — since it comes after .dropzone-input in
	   DOM order — paints it above the input at exactly the moment a drop
	   would land, stealing the drop target away from the input. */
	pointer-events: none;
}

.dropzone.is-dragover .dropzone-icon {
	background: var(--accent-gradient);
	color: #fff;
	transform: scale(1.12) translateY(-3px);
}

.dropzone-text {
	color: var(--fg);
	font-size: 0.92rem;
	font-weight: 600;
	pointer-events: none;
}

.dropzone-hint {
	color: var(--fg-muted);
	font-size: 0.76rem;
	pointer-events: none;
}

.upload-progress {
	width: 100%;
	height: 0.4rem;
	border-radius: var(--radius-pill);
	overflow: hidden;
	accent-color: var(--accent);
}

.files-empty {
	color: var(--fg-muted);
	padding: 2rem 0;
}

.file-name-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.file-row-icon {
	flex-shrink: 0;
	color: var(--fg-muted);
}

.file-actions {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	white-space: nowrap;
}

.file-actions a {
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.85rem;
}

.file-actions a:hover,
.file-actions a:focus-visible {
	color: var(--fg);
}

.inline-action {
	position: relative;
	display: inline-block;
}

.inline-action summary {
	color: var(--fg-muted);
	font-size: 0.85rem;
	cursor: pointer;
	list-style: none;
}

.inline-action summary::-webkit-details-marker {
	display: none;
}

.inline-action summary:hover,
.inline-action summary:focus-visible {
	color: var(--fg);
}

.inline-action[open] summary {
	color: var(--accent);
}

.inline-action .inline-form {
	position: absolute;
	top: 1.5rem;
	right: 0;
	z-index: 5;
	padding: 0.75rem;
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	animation: pop-in 0.15s var(--ease);
}

.inline-action .inline-form input {
	min-height: 2.25rem;
	width: 12rem;
}

.bulk-actions-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	animation: pop-in 0.15s var(--ease);
}

/* Same-specificity tie-break: without this, .bulk-actions-bar's
   display:flex (an author rule) wins the cascade over the UA
   stylesheet's [hidden] { display: none }, since author rules come after
   UA rules when specificity is equal — so the bar would render even
   while the hidden attribute is present. */
.bulk-actions-bar[hidden] {
	display: none;
}

.bulk-actions-bar #bulk-selected-count,
.bulk-actions-bar #gallery-bulk-selected-count {
	font-size: 0.85rem;
	color: var(--fg-muted);
	margin-right: 0.25rem;
}

.bulk-select-all {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--fg-muted);
	cursor: pointer;
}

.bulk-actions-bar input[type="text"] {
	min-height: 2.15rem;
	min-width: 14rem;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
	color: var(--fg-muted);
	font-size: 0.9rem;
}

.pagination a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--fg);
	text-decoration: none;
	font-weight: 600;
}

.pagination a:hover,
.pagination a:focus-visible {
	color: var(--accent);
}

/* ---- Gallery ---- */

.gallery {
	max-width: 90rem;
}

.gallery-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

/* First-version thumbnails are the original image, CSS-sized into a
   fixed square tile via object-fit — not a real resized/cached
   thumbnail. Fine for a personal LAN gallery; revisit if page weight
   becomes a problem with large photo libraries. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem;
}

.gallery-tile-wrap {
	position: relative;
}

.gallery-select {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
}

.gallery-tile {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.gallery-photo {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.gallery-tile:hover .gallery-photo,
.gallery-tile:focus-visible .gallery-photo {
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
}

.gallery-photo img,
.gallery-photo video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s var(--ease);
}

.gallery-tile:hover .gallery-photo img,
.gallery-tile:focus-visible .gallery-photo img,
.gallery-tile:hover .gallery-photo video,
.gallery-tile:focus-visible .gallery-photo video {
	transform: scale(1.06);
}

.gallery-video-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.gallery-video-badge svg {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.6rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	backdrop-filter: blur(2px);
}

.gallery-photo-heic {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-photo-status {
	color: var(--fg-muted);
	font-size: 0.8rem;
	text-align: center;
	padding: 0 0.5rem;
}

.gallery-photo-heic.is-error .gallery-photo-status {
	color: var(--danger);
}

.gallery-tile-name {
	font-size: 0.8rem;
	color: var(--fg-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--overlay);
	backdrop-filter: blur(6px);
	animation: content-fade-in 0.2s var(--ease);
}

.lightbox[hidden] {
	display: none;
}

.lightbox-figure {
	margin: 0;
	max-width: min(90vw, 70rem);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.lightbox-img,
.lightbox-video {
	max-width: 90vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.lightbox-unavailable {
	color: var(--fg-muted);
	font-size: 0.9rem;
	padding: 3rem 1.5rem;
}

.lightbox-caption {
	color: var(--fg-muted);
	font-size: 0.85rem;
	max-width: 90vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lightbox-close,
.lightbox-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
	background: var(--accent);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.08);
	border: none;
	color: #fff;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	cursor: pointer;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
	background: var(--accent);
}

.lightbox-prev {
	left: 1rem;
}

.lightbox-next {
	right: 1rem;
}

/* ---- Modal (upload dialog, etc.) ---- */

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--overlay);
	backdrop-filter: blur(6px);
	animation: content-fade-in 0.2s var(--ease);
}

.modal-overlay[hidden] {
	display: none;
}

.modal {
	width: 100%;
	max-width: 30rem;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 1.5rem;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.modal-header h2 {
	font-size: 1.1rem;
	font-weight: 700;
}

.modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	background: var(--surface-3);
	border: none;
	border-radius: 50%;
	color: var(--fg-muted);
	cursor: pointer;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.modal-close:hover,
.modal-close:focus-visible {
	background: var(--accent);
	color: var(--accent-fg);
}

/* ---- Media Library ---- */

.media-library {
	max-width: 90rem;
}

.kind-filter {
	display: flex;
	gap: 0.35rem;
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
	padding: 0.25rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	width: fit-content;
}

.kind-filter a {
	padding: 0.4rem 0.9rem;
	border-radius: var(--radius-pill);
	color: var(--fg-muted);
	text-decoration: none;
	font-weight: 600;
}

.kind-filter a:hover,
.kind-filter a:focus-visible {
	color: var(--fg);
}

.kind-filter a.active {
	color: var(--accent-fg);
	background: var(--accent-gradient);
}

.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem;
}

.media-tile {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.media-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--surface-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--fg-muted);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.media-tile:hover .media-thumb,
.media-tile:focus-visible .media-thumb {
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
}

.media-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s var(--ease);
}

.media-tile:hover .media-thumb-img,
.media-tile:focus-visible .media-thumb-img {
	transform: scale(1.06);
}

.media-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Media Player ---- */

.media-player {
	max-width: 60rem;
}

.player-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
}

.player-back-link:hover,
.player-back-link:focus-visible {
	color: var(--fg);
}

.player-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 1rem 0 1.25rem;
}

.player-wrap {
	background: #000;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.player-media {
	width: 100%;
	max-height: 80vh;
	display: block;
}

.player-audio {
	max-height: none;
	padding: 2rem 1.5rem;
	background: var(--surface-2);
}

/* ---- Chat ---- */

.chat {
	max-width: 72rem;
	height: calc(100vh - 8rem);
	display: flex;
	flex-direction: column;
}

.chat-layout {
	display: flex;
	gap: 1.5rem;
	flex: 1;
	min-height: 0;
}

.chat-sidebar {
	width: 15rem;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.chat-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}

.chat-rooms {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.chat-room-link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.65rem;
	border-radius: var(--radius-sm);
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.chat-room-link:hover,
.chat-room-link:focus-visible {
	background: var(--surface-hover);
	color: var(--fg);
}

.chat-room-link.active {
	background: var(--accent-soft);
	color: var(--accent);
}

.chat-room-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: inherit;
	opacity: 0.85;
}

.chat-room-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-room-unread[hidden] {
	display: none;
}

.chat-room-unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 0.4rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--accent-fg);
	background: var(--accent-gradient);
	border-radius: var(--radius-pill);
}

.chat-room-link.active .chat-room-unread {
	color: var(--accent);
	background: var(--surface-1);
}

.chat-dm-form {
	display: flex;
	gap: 0.4rem;
}

.chat-dm-form input[type="text"] {
	min-height: 2.35rem;
	font-size: 0.82rem;
	flex: 1;
	min-width: 0;
}

.chat-online-title {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-subtle);
	margin: 0 0 0.5rem;
}

.chat-online-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--fg);
}

.chat-online-list li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.chat-online-list li::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px var(--success-soft);
}

.chat-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.chat-connection-status {
	padding: 0.45rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	text-align: center;
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.chat-message {
	animation: content-fade-in 0.2s var(--ease);
}

.chat-load-more {
	align-self: center;
	background: var(--surface-3);
	border: 1px solid var(--border);
	color: var(--fg-muted);
	border-radius: var(--radius-pill);
	padding: 0.4rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.chat-load-more:hover {
	color: var(--fg);
	border-color: var(--border-strong);
}

.chat-message-meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.chat-message-sender {
	font-weight: 700;
	font-size: 0.85rem;
}

.chat-message-time {
	font-size: 0.72rem;
	color: var(--fg-subtle);
}

.chat-message-body {
	font-size: 0.9rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.chat-attachment-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}

.chat-attachment-link:hover,
.chat-attachment-link:focus-visible {
	background: var(--accent-soft-strong);
}

.chat-send-form {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--border);
}

.chat-attach-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--fg-muted);
	cursor: pointer;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
}

.chat-attach-btn:hover {
	color: var(--fg);
	background: var(--surface-hover);
}

.chat-file-name {
	font-size: 0.78rem;
	color: var(--fg-muted);
	max-width: 8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 0;
}

.chat-send-form input[type="text"] {
	flex: 1;
	min-width: 0;
}

/* ---- Floating chat widget (Files/Gallery/Media/Home — everywhere but
   the full Chat page itself, which already shows everything inline) ---- */

#chat-widget {
	position: fixed;
	right: 1.25rem;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	gap: 0.75rem;
	pointer-events: none;
}

.chat-bubble-panel {
	width: 19rem;
	max-height: 26rem;
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	box-shadow: var(--shadow-lg);
	pointer-events: auto;
	overflow: hidden;
	animation: content-fade-in 0.2s var(--ease);
}

.chat-bubble-panel.minimized {
	max-height: none;
}

.chat-bubble-panel.minimized .chat-bubble-messages,
.chat-bubble-panel.minimized .chat-bubble-form {
	display: none;
}

.chat-bubble-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.85rem;
	background: var(--accent-gradient);
	color: var(--accent-fg);
	cursor: pointer;
	flex-shrink: 0;
}

.chat-bubble-title {
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-bubble-unread[hidden] {
	display: none;
}

.chat-bubble-unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.35rem;
	margin-left: 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--accent);
	background: #fff;
	border-radius: var(--radius-pill);
}

.chat-bubble-actions {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex-shrink: 0;
}

.chat-bubble-minimize,
.chat-bubble-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	color: var(--accent-fg);
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s var(--ease);
}

.chat-bubble-minimize:hover,
.chat-bubble-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.chat-bubble-messages {
	flex: 1;
	overflow-y: auto;
	padding: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-height: 0;
}

.chat-bubble-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	animation: content-fade-in 0.15s var(--ease);
}

.chat-bubble-message.own {
	align-items: flex-end;
}

.chat-bubble-message-sender {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--fg-subtle);
	margin-bottom: 0.15rem;
}

.chat-bubble-message-body {
	max-width: 85%;
	padding: 0.5rem 0.7rem;
	font-size: 0.85rem;
	line-height: 1.35;
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--surface-3);
	border-radius: var(--radius-md);
}

.chat-bubble-message.own .chat-bubble-message-body {
	color: var(--accent-fg);
	background: var(--accent-gradient);
}

.chat-bubble-message .chat-attachment-link {
	padding: 0.4rem 0.65rem;
	font-size: 0.78rem;
}

/* The base .chat-attachment-link is red-on-light-red (var(--accent) on
   var(--accent-soft)) — fine on the neutral .chat-bubble-message-body
   background, but illegible once .own sets that background to the red
   accent gradient. Match the same "light overlay on accent" treatment
   already used for .chat-bubble-minimize/.chat-bubble-close in this
   case. */
.chat-bubble-message.own .chat-attachment-link {
	color: var(--accent-fg);
	background: rgba(255, 255, 255, 0.2);
}

.chat-bubble-message.own .chat-attachment-link:hover,
.chat-bubble-message.own .chat-attachment-link:focus-visible {
	background: rgba(255, 255, 255, 0.32);
}

.chat-bubble-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.7rem;
	border-top: 1px solid var(--border);
	flex-shrink: 0;
}

.chat-bubble-input {
	flex: 1;
	min-width: 0;
	min-height: 2.25rem;
	font-size: 0.85rem;
}

.chat-bubble-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	flex-shrink: 0;
	color: var(--accent-fg);
	background: var(--accent-gradient);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.chat-bubble-send:hover {
	filter: brightness(1.08);
}

@media (max-width: 480px) {
	#chat-widget {
		right: 0.5rem;
		left: 0.5rem;
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.chat-bubble-panel {
		width: 100%;
	}
}

/* ---- To-Do ---- */

.todos {
	max-width: 72rem;
}

.todo-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.todo-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fg-muted);
}

.todo-check-field {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--fg-muted);
	line-height: 1.4;
	cursor: pointer;
}

.todo-check-field input {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.todo-section {
	margin-bottom: 2rem;
}

.todo-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fg-subtle);
	margin: 0 0 0.85rem;
}

.todo-section-title svg {
	color: var(--accent);
}

.todo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}

.todo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.todo-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
	transform: translateY(-1px);
}

.todo-card-link {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.1rem 1.15rem;
	color: inherit;
	text-decoration: none;
	flex: 1;
	min-width: 0;
}

.todo-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.6rem;
}

.todo-card-title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.todo-card-progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.todo-progress-bar {
	flex: 1;
	height: 0.4rem;
	background: var(--surface-3);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.todo-progress-fill {
	height: 100%;
	background: var(--accent-gradient);
	border-radius: var(--radius-pill);
	transition: width 0.25s var(--ease);
}

.todo-progress-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--fg-muted);
	flex-shrink: 0;
}

.todo-card-empty {
	font-size: 0.8rem;
	color: var(--fg-subtle);
}

.todo-card-owner {
	font-size: 0.75rem;
	color: var(--fg-subtle);
	margin-top: auto;
}

.todo-card-actions {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0 0.65rem 0.65rem;
}

.todo-pin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	color: var(--fg-subtle);
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.todo-pin-btn:hover {
	background: var(--surface-hover);
	color: var(--fg);
}

.todo-pin-btn.active {
	color: var(--accent);
}

.todo-pin-global-btn.active {
	color: var(--accent);
}

/* ---- To-Do detail page ---- */

.todo-detail {
	max-width: 52rem;
}

.todo-detail-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.todo-connection-status {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--accent);
	margin-right: 0.4rem;
}

.todo-view-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.todo-view-title {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.todo-title-input {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	border: none;
	background: transparent;
	padding: 0.2rem 0;
	min-height: unset;
}

.todo-title-input:focus {
	outline: none;
	box-shadow: none;
	border-bottom: 2px solid var(--accent);
}

.todo-editor-toolbar {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.4rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.todo-toolbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--fg-muted);
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.todo-toolbar-btn:hover {
	background: var(--surface-hover);
	color: var(--fg);
}

.todo-toolbar-sep {
	width: 1px;
	height: 1.4rem;
	background: var(--border);
	margin: 0 0.3rem;
}

.todo-description-editor {
	min-height: 8rem;
	padding: 0.85rem 1rem;
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	font-size: 0.92rem;
	line-height: 1.55;
}

.todo-description-editor:focus {
	outline: none;
	border-color: var(--accent);
}

.todo-description-editor:empty::before {
	content: "Add a description…";
	color: var(--fg-subtle);
}

.todo-description-editor p,
.todo-description-view p {
	margin: 0 0 0.75rem;
}

.todo-description-editor p:last-child,
.todo-description-view p:last-child {
	margin-bottom: 0;
}

.todo-description-editor img,
.todo-description-view img {
	max-width: 100%;
	border-radius: var(--radius-sm);
}

.todo-description-editor ul,
.todo-description-editor ol,
.todo-description-view ul,
.todo-description-view ol {
	margin: 0 0 0.75rem;
	padding-left: 1.4rem;
}

.todo-description-editor a,
.todo-description-view a {
	color: var(--accent);
}

.todo-description-view {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--fg);
	margin-bottom: 1.5rem;
}

.todo-attachments {
	margin: 1.5rem 0;
}

.todo-attachment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.todo-attachment-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface-3);
}

.todo-attachment-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.todo-attachment-remove {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.todo-attachment-remove:hover {
	background: var(--danger);
}

.todo-attachment-upload-btn {
	display: inline-flex;
	cursor: pointer;
}

.todo-items {
	margin-top: 1.5rem;
}

.todo-items-empty {
	color: var(--fg-muted);
	font-size: 0.85rem;
	padding: 0.5rem 0;
}

.todo-item-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.todo-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.7rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease);
}

.todo-item.dragging {
	opacity: 0.4;
}

.todo-item-drag-handle {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--fg-subtle);
	cursor: grab;
}

.todo-item-check {
	display: inline-flex;
	flex-shrink: 0;
	cursor: pointer;
}

.todo-item-checkbox {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--accent);
	cursor: pointer;
}

.todo-item-checkbox:disabled {
	cursor: default;
}

.todo-item-body {
	flex: 1;
	min-width: 0;
	font-size: 0.9rem;
	word-break: break-word;
	cursor: text;
}

.todo-item.done .todo-item-body {
	color: var(--fg-subtle);
	text-decoration: line-through;
}

.todo-item-edit-input {
	flex: 1;
	min-width: 0;
	min-height: unset;
	padding: 0.2rem 0.4rem;
	font-size: 0.9rem;
}

.todo-item-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	color: var(--fg-subtle);
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.todo-item-delete:hover {
	color: var(--danger);
	background: var(--danger-soft);
}

.todo-item-add-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.todo-item-add-form input[type="text"] {
	flex: 1;
	min-width: 0;
}

/* ---- Mobile ---- */

@media (min-width: 700px) {
	.login {
		padding: 3rem 3rem 3.25rem;
	}
}

@media (min-width: 901px) {
	.sidebar-collapse-btn {
		display: flex;
	}
}

@media (max-width: 900px) {
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		width: 260px;
		box-shadow: var(--shadow-lg);
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	.sidebar-toggle-checkbox:checked ~ .sidebar {
		transform: translateX(0);
	}

	.sidebar-backdrop {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: var(--overlay);
	}

	.sidebar-toggle-checkbox:checked ~ .sidebar-backdrop {
		display: block;
	}

	/* The desktop collapse toggle is irrelevant once the sidebar is an
	   off-canvas drawer; hide it and always show the full (uncollapsed)
	   drawer contents regardless of the persisted collapse preference. */
	.sidebar-collapse-btn {
		display: none;
	}

	.app-shell.sidebar-collapsed .sidebar {
		width: 260px;
		padding: 1.5rem 1.25rem;
	}

	.app-shell.sidebar-collapsed .label-text,
	.app-shell.sidebar-collapsed .sidebar-section-label,
	.app-shell.sidebar-collapsed .chevron {
		display: initial;
	}

	.app-shell.sidebar-collapsed .sidebar-subnav {
		display: flex;
	}

	.sidebar-toggle-btn {
		display: block;
	}

	.topbar {
		padding: 1rem 5vw;
	}

	main {
		padding: 1.5rem 5vw 3rem;
	}

	.chat {
		height: calc(100vh - 6rem);
	}

	.chat-layout {
		flex-direction: column;
	}

	.chat-sidebar {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.65rem;
	}

	.chat-title {
		font-size: 1rem;
	}

	.chat-rooms {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.15rem;
		-webkit-overflow-scrolling: touch;
	}

	.chat-room-link {
		flex-shrink: 0;
		white-space: nowrap;
		background: var(--surface-3);
	}

	.chat-online {
		display: none;
	}

	.todo-grid {
		grid-template-columns: 1fr;
	}

	.todo-editor-toolbar {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	main {
		padding: 1.25rem 5vw 3rem;
	}

	.todo-attachment-grid {
		grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	}

	.todo-item-add-form {
		flex-direction: column;
	}

	/* Full names get clipped in a fixed-width chip at this size — drop
	   the text and keep just the avatar (still a link to /profile),
	   rather than trying to tune a max-width that works for every name
	   length. */
	.user-chip-name {
		display: none;
	}

	.user-chip {
		max-width: none;
		padding: 0.3rem;
	}

	.login-wrap {
		padding: 1.25rem;
	}

	.login {
		padding: 2rem 1.5rem;
		border-radius: var(--radius-md);
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
		gap: 0.6rem;
	}

	.media-grid {
		grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
		gap: 0.6rem;
	}

	.lightbox-nav {
		width: 2.25rem;
		height: 2.25rem;
	}

	.lightbox-nav svg {
		width: 18px;
		height: 18px;
	}

	.lightbox-prev {
		left: 0.25rem;
	}

	.lightbox-next {
		right: 0.25rem;
	}
}