/* Shared tweaks for logos: remove any CSS background, border or shadow
	 and try a gentle blend so white-filled PNG backgrounds become less visible
	 when placed on non-white page backgrounds. This cannot make an opaque
	 background in the PNG transparent; replace the image file if you need
	 a true alpha channel. */
header img, .brand img, .brand > img {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	mix-blend-mode: multiply !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	image-rendering: -webkit-optimize-contrast;
}

/* Theme: unify header + auth card background to match logo backdrop. Adjust --logo-bg
	to the flat color behind your logo (example default: #ffffff). If your logo uses
	a tinted panel (e.g. #f3e8ff), just change the value below; all headers & auth
	card will follow automatically. */
:root { --logo-bg: #ffffff; }

/* Force site headers to use the shared logo background color */
header { background: var(--logo-bg) !important; backdrop-filter: none !important; }

/* Auth page primary card: add class "auth-card" in markup so only that card changes */
.auth-card { background: var(--logo-bg) !important; }

/* Full page hero helper: ensures background image always covers viewport while scrolling */
.fullpage-hero {
	min-height:100vh;
	background-size:cover !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed; /* keeps hero filling on long pages */
}

/* If the logo still shows a hard rectangular background (embedded in the PNG),
	 consider replacing the PNG with a transparent SVG/PNG having alpha channel. */

/* =============================================
	 Unified Header Quick Actions (search/menu/etc)
	 Centralized so all pages share identical look
	 ============================================= */
.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.header-actions .icon-btn{ width:36px; height:36px; position:relative; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e2e8f0; border-radius:10px; background:#fff; cursor:pointer; padding:0; box-shadow:0 1px 2px rgba(2,6,23,.06); transition:background .2s ease,border-color .2s ease, transform .08s ease; }
.header-actions .icon-btn:active{ transform:translateY(1px); }
.header-actions .icon-btn:hover{ background:#f8fafc; }
.header-actions .icon-btn svg{ width:22px; height:22px; stroke:#475569; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.header-actions .icon-btn:hover svg{ stroke:#111827; }
.header-actions .icon-btn.active svg{ stroke:#6d28d9; }
.header-actions .icon-btn.avatar{ border-radius:999px; overflow:hidden; }
.header-actions .icon-btn .dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:999px; background:#ef4444; box-shadow:0 0 0 2px #fff; }
.header-actions .search-wrap{ display:flex; align-items:center; gap:8px; overflow:hidden; position:relative; }
.header-actions .search-input{ width:0; opacity:0; pointer-events:none; transform:translateX(6px); transition: width .25s cubic-bezier(.22,.9,.3,1), opacity .2s ease, transform .25s cubic-bezier(.22,.9,.3,1); border:0; border-radius:10px; padding:0; margin:0; font:500 14px/1.2 ui-sans-serif,system-ui; background:#fff; color:#0f172a; overflow:hidden; }
.header-actions .search-wrap.active .search-input{ width:200px; opacity:1; pointer-events:auto; transform:none; padding:8px 10px; border:1px solid #e2e8f0; }
.header-actions .search-input::placeholder{ color:#64748b; }
.header-actions .search-ico{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:#94a3b8; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; pointer-events:none; display:none; }
#searchPanel{ font:500 13px/1.3 ui-sans-serif,system-ui; }
#searchPanel .item{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; cursor:pointer; transition: background .2s ease; text-decoration:none; color:#0f172a; }
#searchPanel .item:hover{ background:#f8fafc; }
#searchPanel .item-title{ font-weight:700; font-size:13px; color:#0f172a; display:flex; align-items:center; gap:8px; }
#searchPanel .item-title .tag{ display:inline-block; font-weight:800; font-size:11px; padding:3px 8px; border-radius:999px; background:linear-gradient(90deg,#6d28d9,#6366f1); color:#fff; letter-spacing:.2px; }
#searchPanel .item-snippet{ color:#475569; font-weight:500; }
@media (min-width:641px){
	.header-actions .search-input{ width:220px; opacity:1; pointer-events:auto; transform:none; padding:8px 10px 8px 32px; border:1px solid #e2e8f0; }
	.header-actions .search-wrap .search-ico{ display:block; }
	.header-actions .search-wrap .icon-btn.search{ display:none; }
}
@media (max-width:880px){ .header-actions{ gap:8px; } }
@media (max-width:640px){
	.header-actions{ order:0; margin-left:auto; gap:2px; }
	.header-actions .search-wrap{ gap:2px; }
	#searchPanel{ top:40px; left:unset; right:0; width:min(86vw,360px); }
	.header-actions .icon-btn.msg,
	.header-actions .icon-btn.bell,
	.header-actions .icon-btn.avatar{ display:none !important; }
	.header-actions .search-wrap.active .search-input{ width:140px; }
}

/* Alias badge (mobile) */
.header-alias-badge{ display:inline-flex; align-items:center; justify-content:center; padding:0 2px; font:700 12px/1.2 ui-sans-serif,system-ui; color:#6d28d9; white-space:nowrap; margin-right:6px; }