/* --- Custom Auth Page Styles --- */
.auth-page {
	max-width: 420px;
	margin: 12vh auto;
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10);
	padding: 40px 32px 32px 32px;
	color: #181824;
	position: relative;
}
html.dark .auth-page {
	background: linear-gradient(135deg, #181824 80%, #23233a 100%);
	color: #fff;
	box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.gradient-text {
	background: linear-gradient(90deg, #d70b4d 0%, #d70b4d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	align-items: center;
	flex-wrap: nowrap;
}
#authSubtitle {
	color: #b3b3c6;
	font-size: 1.1em;
	margin-bottom: 18px;
}
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: left;
}
.auth-card .input input,
.auth-page .input input {
	background: #fff;
	color: #181824;
	border-radius: 14px;
	border: 1.5px solid #e6e6ef;
	padding: 14px 18px;
	font-size: 1em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: border-color .2s, box-shadow .2s, color .2s;
}
.auth-card .input input:focus,
.auth-page .input input:focus {
	border-color: #d70b4d;
	box-shadow: 0 0 0 3px rgba(215,11,77,0.18);
	color: #181824;
}
.auth-card .input input::placeholder,
.auth-page .input input::placeholder { color: #c8c8d6; opacity: 1; }
html.dark .auth-card .input input,
html.dark .auth-page .input input {
	background: #23233a;
	color: #fff;
	border-radius: 16px;
	border: 1px solid #35355a;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
html.dark .auth-card .input input:focus,
html.dark .auth-page .input input:focus {
	border-color: #d70b4d;
	box-shadow: 0 0 0 2px #d70b4d33;
}
html.dark .auth-card .input input::placeholder,
html.dark .auth-page .input input::placeholder { color: #c8c8d6; opacity: 1; }

.btn.gradient {
	background: linear-gradient(90deg, #d70b4d 0%, #d70b4d 100%);
	color: #fff;
	font-weight: 600;
	border-radius: 24px;
	font-size: 1.1em;
	border: none;
	box-shadow: 0 2px 12px #d70b4d33;
	transition: box-shadow .2s, transform .2s;
}
.btn.gradient:hover {
	box-shadow: 0 4px 24px #d70b4d55;
	transform: translateY(-2px) scale(1.03);
}
#authPageError {
	color: #d70b4d;
	font-weight: 500;
	margin: 0 0 8px 0;
	text-align: left;
}
#toggleAuthText {
	color: #b3b3c6;
	font-size: 1em;
}
#toggleAuthText a {
	color: #d70b4d;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
#toggleAuthText a:hover {
	color: #d70b4d;
}
/* Reusable modern pill input for standalone inputs */
.pill-input {
	border: 1px solid #e6e6ef;         /* light mode border */
	background: #ffffff;                /* light mode surface */
	color: #181824;                     /* light mode text */
	padding: 12px 16px;
	border-radius: 999px;
	outline: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
	min-height: 44px;
}
.pill-input::placeholder { color: #9aa1af; opacity: 1; }
.pill-input:focus {
	border-color: #d70b4d;
	box-shadow: 0 0 0 3px rgba(215,11,77,0.18);
}
/* Dark theme override for pill inputs */
html.dark .pill-input{
	border: 1px solid #35355a;
	background: #23233a;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .pill-input::placeholder{ color: #c8c8d6; }
html.dark .pill-input:focus{
	border-color: #d70b4d;
	box-shadow: 0 0 0 2px #d70b4d33;
}
/* New two-column auth grid */
.auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1000px;
	margin: 10vh auto;
	padding: 0 16px;
}
.auth-grid.single { grid-template-columns: 1fr; max-width: 560px; }
.auth-card {
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10);
	padding: 32px;
	color: #181824;
	position: relative;
	will-change: transform, opacity;
	border: 1.5px solid #e6e6ef;
}
html.dark .auth-card {
	background: linear-gradient(135deg, #181824 80%, #23233a 100%);
	color: #fff;
	box-shadow: 0 8px 32px rgba(0,0,0,0.45);
	border: none;
}
.auth-card.secondary { background: inherit; }
/* Auth brand strip (logo + wordmark) */
.auth-brand{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: -6px 0 8px;
}
.auth-brand img{
	height: 32px;
	width: auto;
	object-fit: contain;
}
.auth-brand span{
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #181824;
}
html.dark .auth-brand span{ color: #fff; }
/* Subtle slide animations */
@keyframes authSlideInLeft {
	from { opacity: 0; transform: translateX(-12px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes authSlideInRight {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: translateX(0); }
}
.auth-card.animate-in-left { animation: authSlideInLeft .25s ease-out; }
.auth-card.animate-in-right { animation: authSlideInRight .25s ease-out; }
@media (max-width: 900px) {
	.auth-grid { grid-template-columns: 1fr; max-width: 560px; }
}
:root {
	--bg: #ffffff;
	--text: #000000;
	--muted: #666666;
	--card: #ffffff;
	--border: #cccccc;
	--primary: #d70b4d;
	--primary-contrast: #ffffff;
	--shadow: 0 8px 24px rgba(0,0,0,.1);
	--pill-bg: #f5f5f5;
	--pill-text: #000000;
	--pill-border: rgba(0,0,0,.1);
	--post-height: 560px;
	--post-media-height: 260px;
}

.dropzone .dz-remove{
	position: absolute;
	top: 12px;
	right: 12px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--text);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
	box-shadow: var(--shadow);
	z-index: 3;
	display: none;
}
.dropzone.has-preview .dz-remove{ display: inline-block; }
:root.dark {
	--bg: #181824;
	--text: #f2f3f7;
	--muted: #b3b3c6;
	--card: #1f2030;
	--border: #2c2d44;
	--primary: #d70b4d;
	--primary-contrast: #ffffff;
	--shadow: 0 10px 28px rgba(0,0,0,.45);
	--pill-bg: #23233a;
	--pill-text: #ffffff;
	--pill-border: #35355a;
}
* {
	box-sizing: border-box;
	transition: all .3s ease;
	/* Remove blue tap highlight on Android/Chrome and other WebKit-based browsers */
	-webkit-tap-highlight-color: transparent;
}
*::before, *::after{ -webkit-tap-highlight-color: transparent; }
html, body {
	height: 100%;
	margin: 0;
}
body {
	font-family: 'Poppins', sans-serif;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}
/* On touch devices, suppress default focus outlines (we keep our custom :focus-visible styles) */
@media (pointer: coarse) {
	a:focus,
	button:focus,
	input:focus,
	textarea:focus,
	select:focus,
	[role="button"]:focus,
	.btn:focus,
	.nav-btn:focus { outline: none; }
	/* Avoid text selection flashes on taps */
	a, button, [role="button"], .btn, .nav-btn { -webkit-user-select: none; user-select: none; }
}
/* Tasteful dark background gradient/texture when in dark mode */
html.dark body{
	background-color: #181824; /* fallback */
	background-image:
		radial-gradient(1100px 600px at 10% -10%, rgba(255,255,255,0.05), transparent 60%),
		radial-gradient(900px 420px at 110% -20%, rgba(215,11,77,0.04), transparent 55%),
		linear-gradient(180deg, #1b1c2a 0%, #181824 60%, #171722 100%);
	background-attachment: fixed, fixed, fixed;
}
.app-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--card);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow);
}
/* Slightly increase vertical breathing room in header */
.app-header { padding-top: 20px; padding-bottom: 22px; }
/* Add a touch of vertical margin around nav pills in header */
.app-header .nav { margin: 6px 0 8px; }
/* Light theme header: flat white with soft divider */
html:not(.dark) .app-header{
	background: #ffffff;
	border-bottom: 1px solid #eeeeee;
	box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
/* Header gradient to match screenshot vibe in dark */
html.dark .app-header{
	background: linear-gradient(180deg, #1e1f2e 0%, #1a1b28 100%);
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
}
/* Small wordmark to the right of the header logo */
.brand .brand-title{
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--primary);
	white-space: nowrap;
}
/* Placeholder img for site logo; keeps header height consistent */
.site-logo{
	display: block;
	height: 50px;          /* fixed header height */
	max-height: 50px;      /* never exceed header */
	width: auto;           /* allow aspect ratio */
	object-fit: contain;   /* preserve logo */
}
/* Ensure white logo remains visible on white header in light theme */
html:not(.dark) .site-logo{
	/* subtle halo for contrast without changing brand colors */
	filter: drop-shadow(0 0 1px rgba(0,0,0,0.45)) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.nav {
	display: flex;
	gap: 12px;
}
.nav-btn {
	background: var(--card);
	border: 1px solid var(--border);
	padding: 10px 16px;
	border-radius: 50px;
	color: var(--text);
	cursor: pointer;
	position: relative;
}
.nav-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
/* Brand the header nav pills with #d70b4d in both themes */
.app-header .nav .nav-btn{
	background: transparent;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	border-radius: 999px;
	font-weight: 600;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.app-header .nav .nav-btn:hover,
.app-header .nav .nav-btn:focus-visible{
	background: #d70b4d;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(215,11,77,0.28);
	transform: translateY(-1px);
}
/* Light theme translucent pill nav buttons */
html:not(.dark) .nav-btn{
	background: rgba(0,0,0,.02);
	border-color: rgba(0,0,0,.10);
	box-shadow: none;
}
html:not(.dark) .nav-btn:hover{
	background: rgba(0,0,0,.04);
	border-color: rgba(0,0,0,.16);
	box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
/* Translucent pill nav buttons in dark (as in screenshot) */
html.dark .nav-btn{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.12);
	color: var(--text);
	box-shadow: none;
}
html.dark .nav-btn:hover{
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.18);
	box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.actions {
	display: flex;
	gap: 12px;
	align-items: center;
}
/* Theme toggle as circular control with adaptive ring */
#themeToggle{
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	display: grid;
	place-items: center;
	line-height: 1;
	font-size: 18px;
}
/* Theme toggle: white in light mode, #181824 in dark mode */
html:not(.dark) #themeToggle{
	background: #ffffff;
	color: #181824;
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(0,0,0,.12);
}
html.dark #themeToggle{
	background: #181824;
	color: #ffffff;
	box-shadow: 0 0 0 3px #2c2d44, 0 0 0 6px rgba(0,0,0,.45);
}
#themeToggle:hover{
	transform: translateY(-2px);
}

/* Logout button: #d70b4d in light, #181824 in dark */
html:not(.dark) #logoutBtn{
	background: #d70b4d !important;
	color: #ffffff !important;
	border: 2px solid #d70b4d;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html:not(.dark) #logoutBtn:hover{
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(215,11,77,0.28);
}
html.dark #logoutBtn{
	background: #181824 !important;
	color: #ffffff !important;
	border: 1px solid #2c2d44;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html.dark #logoutBtn:hover{
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.btn {
	border: none;
	background: var(--primary);
	color: var(--primary-contrast);
	padding: 12px 20px;
	border-radius: 50px;
	cursor: pointer;
}
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.btn:active {
	transform: translateY(0);
}
.btn.primary {
	background: var(--primary);
}
.btn.ghost {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text);
}
.btn:focus-visible {
	outline: 3px solid var(--border);
	outline-offset: 3px;
}
a {
	color: var(--primary);
	text-decoration: none;
}
a:hover {
	color: var(--text);
}
.muted {
	color: var(--muted);
}
.error {
	color: #ff3333;
}
.row {
	display: flex;
	gap: 12px;
	align-items: center;
}
.space-between {
	justify-content: space-between;
	width: 100%;
}
.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: var(--shadow);
	padding: 20px;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
.avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border);
	background: #e5e5e5;
}
.avatar:hover {
	transform: scale(1.05);
}
.app-root {
	max-width: 1100px;
	margin: 20px auto;
	padding: 0 20px;
}
.feed-layout {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 24px;
}
.sidebar-sticky {
	position: sticky;
	top: 100px;
	height: fit-content;
}
.auth-page {
	max-width: 500px;
	margin: 15vh auto;
	text-align: center;
	padding: 32px;
	background: var(--card);
	border-radius: 32px;
	box-shadow: var(--shadow);
}
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}
.input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.input span {
	font-size: .95em;
	color: var(--muted);
}
.input input {
	border: none;
	background: linear-gradient(to bottom, var(--pill-bg), #ffffff10);
	color: var(--pill-text);
	padding: 14px 20px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0,0,0,.1), inset 0 0 5px rgba(255,255,255,.3);
	border: 1px solid var(--pill-border);
	outline: none;
	transition: box-shadow .3s ease, transform .2s ease;
}
.input input:focus {
	box-shadow: 0 6px 20px rgba(0,0,0,.15), inset 0 0 8px rgba(255,255,255,.5);
	transform: translateY(-2px);
}
.feed {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}
.post {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: var(--shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.post:hover {
	transform: translateY(-4px);
}
.post header, .post footer {
	padding: 14px 16px;
}
.post header .avatar{ width: 48px; height: 48px; }
.post .media { background: #000; height: var(--post-media-height); display: flex; align-items: center; justify-content: center; }
.post .media img, .post .media video { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; margin: 0 auto; }
.post .media img:hover {
	transform: scale(1.03);
}
.post .media {
	position: relative;
}
/* Carousel */
.carousel{ position: relative; width: 100%; height: 100%; overflow: hidden; }
.carousel .track{ position: relative; width: 100%; height: 100%; }
.carousel .slide{ position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; display: flex; align-items: center; justify-content: center; }
.carousel .slide.active{ opacity: 1; }
.carousel .slide img{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.carousel .nav{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85); border: 1px solid var(--border); color: var(--text); border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.carousel .nav:hover{ transform: translateY(-50%) scale(1.05); }
.carousel .nav.prev{ left: 8px; }
.carousel .nav.next{ right: 8px; }
html.dark .carousel .nav{ background: rgba(31,32,48,0.9); color: #fff; border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.carousel .dots{ position: absolute; left: 0; right: 0; bottom: 6px; display: flex; gap: 6px; justify-content: center; }
.carousel .dot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1px solid var(--border); cursor: pointer; }
.carousel .dot.active{ background: #d70b4d; border-color: #d70b4d; box-shadow: 0 0 0 2px rgba(215,11,77,0.25); }
html.dark .carousel .dot{ background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.15); }
.dbl-heart {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(0.8);
	font-size: 100px;
	opacity: 0;
	pointer-events: none;
}
.dbl-heart.show {
	opacity: 1;
	transform: translate(-50%,-50%) scale(1.1);
}
.post .actions {
	display: flex;
	gap: 14px;
	padding: 14px 16px;
	border-top: 1px solid var(--border);
}
.post .actions .btn{
	background: #ffffff;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(215,11,77,0.15);
	padding: 10px 16px;
	font-weight: 600;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.post .actions .btn:hover,
.post .actions .btn.active{
	background: #d70b4d;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(215,11,77,0.28);
	transform: translateY(-1px);
}
/* Dark theme: avoid bright white buttons in posts */
html.dark .post .actions .btn{
	background: #23233a;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .post .actions .btn:hover,
html.dark .post .actions .btn.active{
	background: #d70b4d;
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(215,11,77,0.28);
}
.post .likes{ color: #d70b4d; font-weight: 600; cursor: pointer; }
.post .likes:hover{ text-decoration: underline; }
.dbl-heart{ color: #d70b4d; }
.post .likes {
	padding: 0 16px 10px;
	font-weight: 600;
}
.likes-row{ display:flex; align-items: baseline; justify-content: space-between; padding: 0 16px 10px; gap: 12px; }
.likes-row .likes{ padding: 0; margin: 0; }
.likes-row .likes, .likes-row .comments-count{
	color: #d70b4d;
	font-weight: 600;
	cursor: pointer;
	font-size: 1em;
	line-height: 1.4;
	display: inline-block;
	margin: 0;
}
.likes-row .comments-count:hover{ text-decoration: underline; }
.post .caption {
	padding: 10px 16px;
}
.comments {
	list-style: none;
	margin: 0;
	padding: 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.comments .btn{
	align-self: flex-start;
	background: #ffffff;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(215,11,77,0.15);
	font-weight: 600;
	padding: 8px 14px;
}
.comments .btn:hover{ background:#d70b4d; color:#ffffff; box-shadow: 0 6px 16px rgba(215,11,77,0.28); }
/* Dark theme: comments button surface */
html.dark .comments .btn{
	background: #23233a;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .comments .btn:hover{ background:#d70b4d; color:#ffffff; box-shadow: 0 6px 16px rgba(215,11,77,0.28); }
.comment-input {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-top: 1px solid var(--border);
}
/* White rounded comment input with subtle border/shadow and brand focus */
.comment-input input{
	flex: 1;
	background: #ffffff;
	color: #181824;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1.5px solid #e6e6ef;
	outline: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
	min-width: 0; /* prevent overflow in flex row */
}
.comment-input input::placeholder{ color: #9aa1af; opacity: 1; }
.comment-input input:focus{
	border-color: #d70b4d;
	box-shadow: 0 0 0 3px rgba(215,11,77,0.20), 0 2px 8px rgba(0,0,0,0.08);
	transform: translateY(-1px);
}
.comment-input .btn{
	background: #ffffff;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(215,11,77,0.15);
	height: 44px;
	font-weight: 600;
}
.comment-input .btn:hover{ background: #d70b4d; color: #ffffff; box-shadow: 0 6px 16px rgba(215,11,77,0.28); }
/* Dark theme: comment input and button surfaces */
html.dark .comment-input input{
	background: #23233a;
	color: #ffffff;
	border: 1px solid #35355a;
	height: 44px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .comment-input input::placeholder{ color: #c8c8d6; }
html.dark .comment-input input:focus{
	border-color: #d70b4d;
	box-shadow: 0 0 0 2px #d70b4d33, 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .comment-input .btn{
	background: #23233a;
	color: #d70b4d;
	border: 2px solid #d70b4d;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
html.dark .comment-input .btn:hover{ background:#d70b4d; color:#ffffff; box-shadow: 0 6px 16px rgba(215,11,77,0.28); }
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.grid img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 16px;
}
.grid img:hover {
	transform: scale(1.05);
}
.chat-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 16px;
}
.chat-sidebar {
	display: flex;
	flex-direction: column;
}
.sidebar-header {
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.friends-list {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: auto;
	max-height: 75vh;
}

/* Themed scrollbars for friends lists (sidebar and New picker) */
.friends-list::-webkit-scrollbar { width: 10px; height: 10px; }
.friends-list::-webkit-scrollbar-track { background: var(--card); border-radius: 10px; }
.friends-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--card); }
.friends-list::-webkit-scrollbar-thumb:hover { background: #b3b3c2; }
/* Firefox */
.friends-list { scrollbar-width: thin; scrollbar-color: var(--border) var(--card); }

/* Ensure modal picker list uses same max height and scroll style */
#userPickerList.friends-list { max-height: 60vh; }
.friend {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px;
	border-radius: 16px;
	cursor: pointer;
}
.friend:hover {
	background: rgba(255,255,255,.06);
}

.friend .meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.friend .name {
	font-weight: 600;
}
.friend .last {
	font-size: .9em;
	color: var(--muted);
}
.friend .last .ago {
	opacity: .85;
}
.friend .badge {
	margin-left: auto;
	background: #ff3333;
	color: #fff;
	border-radius: 50px;
	padding: 4px 10px;
	font-size: .8em;
}
.avatar-wrap {
	position: relative;
	display: inline-block;
}
.presence {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--card);
}
.presence.on {
	background: #00cc00;
}
.presence.off {
	background: #666666;
}
.chat-pane {
	display: flex;
	flex-direction: column;
	min-height: 75vh;
}
.chat-header {
	padding: 16px 18px;
	border-bottom: 1px solid var(--border);
	font-weight: 600;
	color: var(--text);
}
.chat-list {
	list-style: none;
	margin: 0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: auto;
	flex: 1;
	min-height: 0;
}
.message {
	max-width: 75%;
	padding: 12px 16px;
	border-radius: 24px;
	border: 1px solid var(--border);
}
.message { position: relative; }
.message { padding-right: 36px; }
.message .msg-del{
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	background: rgba(0,0,0,0.06);
	color: var(--text);
	cursor: pointer;
	opacity: .85;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.message .msg-del:hover,
.message .msg-del:focus-visible{
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,.15);
	opacity: 1;
}
/* High-contrast surface in dark theme */
html.dark .message .msg-del{
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.18);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.message.out {
	align-self: flex-end;
	background: var(--primary);
	color: var(--primary-contrast);
	border-color: transparent;
}
.message.in {
	align-self: flex-start;
	background: var(--card);
}
.chat-composer {
	padding: 16px;
	border-top: 1px solid var(--border);
	display: flex;
	gap: 12px;
}
.chat-composer input {
	flex: 1;
	border: none;
	background: linear-gradient(to bottom, var(--pill-bg), #ffffff10);
	color: var(--pill-text);
	padding: 14px 20px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0,0,0,.1), inset 0 0 5px rgba(255,255,255,.3);
	border: 1px solid var(--pill-border);
	outline: none;
}
.chat-composer input:focus {
	box-shadow: 0 6px 20px rgba(0,0,0,.15), inset 0 0 8px rgba(255,255,255,.5);
}
.chat-composer .btn {
	border-radius: 50px;
	padding: 12px 20px;
}
.hidden {
	display: none;
}
#authModal::backdrop {
	background: rgba(0,0,0,.6);
}
/* Likes modal styling: remove default dialog white box and use our card */
#likesModal {
	padding: 0;
	border: none;
	background: transparent;
}
#likesModal::backdrop {
	background: rgba(0,0,0,.6);
}
#likesModal .card{
	min-width: 300px;
	max-width: 460px;
	color: var(--text);
}
html.dark #likesModal .card{ color: #ffffff; }
#likesModal h3{ margin: 0 0 10px 0; }
#likesModal #likesList{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#likesModal #likesList li{
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Comments modal styling mirrors Likes */
#commentsModal { padding: 0; border: none; background: transparent; }
#commentsModal::backdrop { background: rgba(0,0,0,.6); }
#commentsModal .card{ min-width: 300px; max-width: 600px; color: var(--text); }
html.dark #commentsModal .card{ color: #ffffff; }
#commentsModal h3{ margin: 0 0 10px 0; }
#commentsModal #commentsList{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#commentsModal #commentsList li .avatar{ width: 32px; height: 32px; }
/* Inline 1nf1n1ty badge next to names */
.badge-1nf1n1ty{ display: inline-flex; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle; border-radius: 6px; background: transparent; border: 1px solid var(--border); align-items: center; justify-content: center; }
.badge-1nf1n1ty img{ display: block; width: 16px; height: 16px; object-fit: contain; }
html.dark .badge-1nf1n1ty{ border-color: #3a3b55; }
.uploader {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.dropzone {
	border: 2px dashed var(--border);
	border-radius: 24px;
	padding: 28px;
	text-align: center;
	background: transparent;
	position: relative;
}
.dropzone, .dropzone * { transition: none !important; }
.dropzone.dragover {
	border-color: var(--primary);
	background: rgba(255,255,255,.04);
}
.dropzone img {
	max-width: 100%;
	border-radius: 16px;
	display: block;
	margin: 12px auto;
}
.dropzone img.hidden{ display: none; }
.dropzone img:not([src]),
.dropzone img[src=""]{ display: none; }
.dropzone.has-preview{
	padding: 28px; /* keep padding constant to avoid movement when preview appears */
	border-style: solid;
}
.dropzone.has-preview .dz-instructions{ display: none; }

/* Image Viewer (zoom & pan) */
#imageViewer{ padding: 0; border: none; background: transparent; }
#imageViewer::backdrop{ background: rgba(0,0,0,.6); }
#imageViewer .viewer{ background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); width: min(92vw, 1000px); height: 88vh; display: flex; flex-direction: column; }
#imageViewer .viewer-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
#imageViewer .viewer-actions{ display: flex; gap: 8px; align-items: center; }
#imageViewer .viewer-btn{ background: var(--card); color: var(--text); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
#imageViewer .viewer-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
#imageViewer .viewer-canvas{ position: relative; flex: 1 1 auto; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
#imageViewer .viewer-canvas img{ max-width: none; max-height: none; transform-origin: center center; cursor: grab; }
#imageViewer .viewer-canvas img:active{ cursor: grabbing; }
/* Disable image hover zoom inside dropzone to prevent covering the remove button */
.dropzone img:hover { transform: none; }
.uploader-meta textarea {
	width: 100%;
	resize: vertical;
	border: none;
	background: linear-gradient(to bottom, var(--pill-bg), #ffffff10);
	color: var(--pill-text);
	border-radius: 16px;
	padding: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,.1), inset 0 0 5px rgba(255,255,255,.3);
}
progress {
	height: 10px;
	border-radius: 8px;
}
@media (max-width: 900px) {
	.chat-layout {
		grid-template-columns: 1fr;
	}
	.feed-layout {
		grid-template-columns: 1fr;
	}
	.sidebar-sticky {
		position: static;
	}
	.app-root {
		padding: 0 12px;
	}
	.nav .nav-btn {
		padding: 8px 12px;
	}
}
@media (max-width: 640px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Mobile header: keep actions visible, move nav below */
	.app-header{
		flex-wrap: wrap;
		padding: 12px 14px;
		gap: 8px 12px;
	}
	.site-logo{ height: 42px; max-height: 42px; }
	.actions{ margin-left: auto; }
	#themeToggle{ width: 40px; height: 40px; }
	/* Place nav on its own row and allow wrapping */
	.nav{
		order: 3;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
	}
	.nav .nav-btn{ padding: 8px 12px; }
	/* Slightly tighter auth buttons so Logout fits */
	#logoutBtn, #loginBtn{ padding: 8px 12px; }
}