/* ==========================================
   Colorful Modern Theme (Bootstrap-friendly)
   - Richer surfaces + gradients
   - Looks great in light/dark
   - Works with masonry, sliders, chips
   ========================================== */

:root { --r-sm: 12px; --r-md: 16px; --r-lg: 24px; /* Primary accent system */ --a1: #6E73EC; /* indigo */ --a2: #22C55E; /* emerald */ --a3: #F97316; /* orange */ --a4: #06B6D4; /* cyan */ --a5: #EC4899; /* pink */ --accent: var(--a1); --accent-soft: rgba(110,115,236,.18); /* Surfaces */ --stroke: rgba(80,80,100,.18); --stroke-2: rgba(80,80,100,.26); --surface: #FFFFFF; --surface-2: #F7F8FC; --surface-3: #F0F2FA; --surface-4: #FFF; --surface-5: #FFF; --text-soft: rgba(20,20,30,.68); /* Shadows */ --sh1: 0 2px 10px rgba(10, 12, 30, .06); --sh2: 0 14px 44px rgba(10, 12, 30, .12); --sh3: 0 22px 70px rgba(10, 12, 30, .18); /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 160ms var(--ease); --t-med: 260ms var(--ease); /* Fancy background */ --bg-grad: radial-gradient(900px 600px at 10% 0%, rgba(110,115,236,.18), transparent 55%), radial-gradient(900px 600px at 90% 10%, rgba(6,182,212,.14), transparent 55%), radial-gradient(900px 600px at 80% 90%, rgba(236,72,153,.10), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f7f8fc 40%, #f2f4ff 100%); --form-login-div-line-background-color: rgba(0, 0, 0, 0.1); --external-login-btn-background: #FFF; --external-login-btn-color: #000; --external-login-btn-border-color: #DCDCE5; --external-login-btn-social-text-color: #555; --external-login-btn-box-shadow-color: rgba(220, 220, 229, .5); --footer-background-color: rgba(255, 255, 255, 0.7); --footer-text-color: #222; --text-input-placeholder-text-color: #AAA; --top-search-border-color: #EEE; }

html, body { overscroll-behavior-x: none; }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

/* =========================
   Header Nav Icons
   ========================= */

.nav-icon-link { display: inline-flex; align-items: center; gap: 8px; padding: .45rem .75rem; border-radius: 999px; transition: background var(--t-fast), transform var(--t-fast); }

    .nav-icon-link:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); transform: translateY(-1px); }

.nav-ico { width: 18px; height: 18px; display: inline-flex; pointer-events: none; }

    .nav-ico svg { width: 100%; height: 100%; /*fill: currentColor;*/ opacity: .9; pointer-events: none; }

.nav-link.active { background: linear-gradient( 135deg, rgba(110,115,236,.20), rgba(6,182,212,.14) ); box-shadow: inset 0 0 0 1px rgba(110,115,236,.35); }

/* Desktop navbar (768px and above) */
@media (min-width: 768px) {
    .navbar-collapse .nav-text { display: inline-block; }

    /* Hide hamburger on desktop */
    .navbar-toggler { display: none !important; }
}

/* Mobile: hide desktop navbar, show hamburger */
@media (max-width: 767px) {
    /* Hide the desktop navbar collapse on mobile */
    .navbar-collapse { display: none !important; }
    .card:hover { transform: none !important; box-shadow: none !important; }
}

/* Dark mode */
[data-bs-theme="dark"] { --stroke: rgba(235,235,245,.14); --stroke-2: rgba(235,235,245,.20); --surface: #0B1220; --surface-2: #0F1A2E; --surface-3: #13213A; --surface-4: #000; --surface-5: #090E18; --text-soft: rgba(235,235,245,.66); --sh1: 0 2px 10px rgba(0,0,0,.35); --sh2: 0 18px 56px rgba(0,0,0,.48); --sh3: 0 26px 84px rgba(0,0,0,.58); --bg-grad: radial-gradient(900px 600px at 10% 0%, rgba(110,115,236,.25), transparent 55%), radial-gradient(900px 600px at 90% 10%, rgba(6,182,212,.18), transparent 55%), radial-gradient(900px 600px at 75% 95%, rgba(236,72,153,.14), transparent 55%), linear-gradient(180deg, #0b1220 0%, #0b1220 60%, #0a1020 100%); --form-login-div-line-background-color: rgba(255, 255, 255, 0.1); --external-login-btn-background: #000; --external-login-btn-color: #FFF; --external-login-btn-border-color: #555; --external-login-btn-social-text-color: #FFF; --external-login-btn-box-shadow-color: rgba(0, 0, 0, .5); --footer-background-color: rgba(0, 0, 0, 0.7); --footer-text-color: #FFF; --text-input-placeholder-text-color: #777; --top-search-border-color: #293346; }

/* ==========================================
   Base + Background
   ========================================== */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg-grad); }

.container { max-width: 1120px; }

a { text-decoration: none; }
hr { opacity: .14; }

.text-muted { color: var(--text-soft) !important; }

/* ==========================================
   Navbar (colorful glass)
   ========================================== */
.navbar { border-bottom: var(--bs-border-width) var(--bs-border-style) transparent /*var(--bs-border-color)*/; background: color-mix(in srgb, var(--surface-4) 80%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--sh1); -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }

    .navbar.scroll-shadow { /*box-shadow: var(--sh2) !important;*/ }

.navbar-brand { padding-top: 0 !important; padding-bottom: 0 !important; font-weight: 800; letter-spacing: -0.03em; position: relative; }

.nav-link { border-radius: 999px; margin-right: 5px; padding: .45rem .75rem; transition: background var(--t-fast), transform var(--t-fast); }

    .nav-link:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); transform: translateY(-1px); }

/* ==========================================
   Breadcrumb Navigation
   ========================================== */
.breadcrumb-nav { margin-bottom: 1rem; }

.breadcrumb { background: transparent; padding: 0; margin-bottom: 0; font-size: 14px; }

.breadcrumb-item { color: var(--text-soft); }

.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--stroke-2); font-size: 18px; line-height: 18px; padding-right: 0.5rem; padding-left: 0.5rem; }

.breadcrumb-item a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }

.breadcrumb-item a:hover { color: color-mix(in srgb, var(--accent) 70%, #000); text-decoration: underline; }

[data-bs-theme="dark"] .breadcrumb-item a { color: #FFF !important; }

.breadcrumb-item.active { color: var(--text-soft); font-weight: 500; }

/* ==========================================
   Off-Canvas Mobile Navigation
   ========================================== */
.offcanvas-start { width: 320px; border-right: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--sh2); }

.offcanvas-header { /*border-bottom: 1px solid var(--stroke);*/ padding: 1rem 1.25rem; }

.offcanvas-body { padding: 1.25rem; display: flex; flex-direction: column; }

/* Mobile navigation links - full width with better touch targets */
.mobile-nav-link { width: 100%; display: flex !important; align-items: center; gap: 12px; padding: 12px 16px !important; border-radius: var(--r-sm) !important; margin-bottom: 6px; background: transparent; transition: background var(--t-fast), transform var(--t-fast); }

    .mobile-nav-link:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent) !important; transform: translateX(2px); }

    .mobile-nav-link .nav-text { display: inline-block !important; font-weight: 500; pointer-events: none; }

.offcanvas-footer-links { display: block; clear: both; margin-bottom: 10px; text-align: center; }

    .offcanvas-footer-links a { font-size: 13px; margin-left: 5px; margin-right: 5px; }

/* Off-canvas footer actions */
.offcanvas-footer-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--stroke); }

/* Style login/register buttons in offcanvas */
.offcanvas-footer-actions .navbar-nav { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; margin: 0; list-style: none; }

.offcanvas-footer-actions .nav-item { width: 100%; margin: 0 !important; }

.offcanvas-footer-actions .btn { width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600; border-radius: var(--r-sm); }

/* Backdrop customization */
.offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.5); }

[data-bs-theme="dark"] .offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.7); }

/* Hide off-canvas on desktop */
@media (min-width: 768px) {
    .offcanvas-start { display: none; }
}

/* ==========================================
   Buttons (gradients + glow)
   ========================================== */
.btn { border-radius: 999px; transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); }

    .btn:hover { transform: translateY(-1px); box-shadow: var(--sh1); }

    .btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary { border: none; background: linear-gradient(135deg, var(--a1), #8b8fff); box-shadow: 0 10px 30px rgba(110,115,236,.22); }

    .btn-primary:hover { filter: brightness(1.03); box-shadow: 0 14px 40px rgba(110,115,236,.28); }

.btn-outline-secondary { border-color: var(--stroke-2); background: color-mix(in srgb, var(--surface) 75%, transparent); }

    .btn-outline-secondary:hover { box-shadow: var(--sh1); }

/* Accent “chips” buttons (optional utility) */
.btn-accent { border: none; color: white !important; background: linear-gradient(135deg, var(--a4), var(--a1)); box-shadow: 0 10px 26px rgba(6,182,212,.20); }

/* ==========================================
   Inputs (rich)
   ========================================== */
.form-control, .form-select { border-radius: var(--r-sm); border-color: var(--stroke); background: color-mix(in srgb, var(--surface-2) 80%, transparent); transition: box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast); }

    .form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--a1) 55%, var(--stroke)); box-shadow: 0 0 0 .25rem rgba(110,115,236,.20); background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* ==========================================
   Cards (color edges + depth)
   ========================================== */
.card { border-radius: var(--r-md); border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-5) 88%, transparent); overflow: hidden; box-shadow: var(--sh1); transition: transform var(--t-med), box-shadow var(--t-med); }

    .card::before { /* subtle top accent line */ content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--a1), var(--a4), var(--a5)); opacity: .55; }

    .card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }

/* ==========================================
   Masonry Feed
   ========================================== */
.masonry { column-gap: 1.15rem; column-count: 1; }

@media (min-width: 768px) {
    .masonry { column-count: 2; }
}

@media (min-width: 1100px) {
    .masonry { column-count: 3; }
}

.masonry-item { display: flow; width: 100%; margin: 0 0 1.15rem; break-inside: avoid; animation: fadeUp .26s var(--ease) both; }

/* Project cards */
.project-card img { width: 100%; height: 100%; display: block; /*transform: scale(1.001); transition: transform var(--t-med);*/ }
/*.project-card:hover img { transform: scale(1.03); }*/

/* Card meta chips (likes/difficulty/cost) */
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.meta-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 75%, transparent); box-shadow: var(--sh1); font-size: 13px; line-height: 1; opacity: .95; }

.meta-ico { opacity: .9; transform: translateY(-.5px); }

/* Difficulty color accents */
.meta-diff[data-diff="Easy"] { border-color: rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.08)); }

.meta-diff[data-diff="Medium"] { border-color: rgba(249,115,22,.38); background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(249,115,22,.08)); }

.meta-diff[data-diff="Hard"] { border-color: rgba(236,72,153,.38); background: linear-gradient(135deg, rgba(236,72,153,.16), rgba(236,72,153,.08)); }

/* Placeholder */
.project-placeholder { padding: 54px 14px; text-align: center; color: var(--text-soft); background: color-mix(in srgb, var(--surface-2) 85%, transparent); }

/* ==========================================
   Chips (Filter chips + Popular bar)
   ========================================== */
.chip, .popular-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 78%, transparent); color: inherit; font-size: 13px; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }

    .chip:hover, .popular-chip:hover { transform: translateY(-1px); box-shadow: var(--sh1); background: color-mix(in srgb, var(--surface-3) 78%, transparent); }

    /* Active category */
    .popular-chip.active { border-color: rgba(110,115,236,.45); background: linear-gradient(135deg, rgba(110,115,236,.20), rgba(6,182,212,.14)); box-shadow: 0 0 0 4px rgba(110,115,236,.14); }

    /* Clear chip */
    .chip-clear, .popular-chip.clear { border-style: dashed; opacity: .95; }

.clear-line { display: block; clear: both; }

/* Popular bar container */
.popular-bar { border-radius: var(--r-lg); border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-5) 80%, transparent); box-shadow: var(--sh1); padding: 12px 14px; }

.popular-title { margin-bottom: 8px; }

.popular-chips { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--stroke) transparent; padding-bottom: 4px; }

.popular-chips::-webkit-scrollbar { height: 6px; }

.popular-chips::-webkit-scrollbar-track { background: transparent; }

.popular-chips::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 3px; }

.popular-chips::-webkit-scrollbar-thumb:hover { background: var(--stroke-2); }

.popular-chip { flex-shrink: 0; white-space: nowrap; }

/* ==========================================
   Empty State
   ========================================== */
.empty-state { border-radius: var(--r-lg); border: 1px dashed var(--stroke-2); background: radial-gradient(700px 220px at 30% 20%, rgba(110,115,236,.14), transparent 60%), radial-gradient(700px 220px at 70% 20%, rgba(6,182,212,.10), transparent 60%), color-mix(in srgb, var(--surface-2) 80%, transparent); padding: 26px; }

.empty-title { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }

/* ==========================================
   Before/After Slider
   ========================================== */
.ba-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; touch-action: pan-y pinch-zoom; /* allow vertical scroll, prevent horizontal pan */ user-select: none; -webkit-user-select: none; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 85%, transparent); }

.ba-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center left; }
.ba-after { z-index: 1; }

.ba-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; z-index: 2; }

.ba-before { z-index: 1; }

.ba-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background: rgba(255,255,255,.88); z-index: 5; pointer-events: auto; cursor: ew-resize; box-shadow: 0 0 0 2px rgba(0,0,0,.10); touch-action: none; }

[data-bs-theme="light"] .ba-handle { background: rgba(0,0,0,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.22); }

.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; pointer-events: none; /* don't intercept mouse/touch - only for keyboard */ }

.ba-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 999px; background: var(--surface-3); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }

.ba-handle::after { content: "⇄"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); font-size: 18px; opacity: .7; }

/* Mini hint */
.ba-mini-hint { position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-4) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sh1); opacity: 0; transform: translateY(4px); transition: opacity var(--t-fast), transform var(--t-fast); z-index: 5; pointer-events: none; }

.img-count { position: relative; float: right; font-size: 11px; top: -15px; right: -10px; }

.project-card:hover .ba-mini-hint,
.project-card:focus-within .ba-mini-hint { opacity: 1; transform: translateY(0); }

/* ==========================================
   Comments
   ========================================== */
.comment-card { border-radius: var(--r-md); border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-5) 86%, transparent); box-shadow: var(--sh1); padding: 14px; }

.comment-replies { margin-left: 16px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--a1) 35%, var(--stroke)); }

/* ==========================================
   Auth Card (Login/Register)
   ========================================== */
.auth-card { max-width: 460px; margin: 0 auto; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: radial-gradient(600px 260px at 20% 0%, rgba(110,115,236,.18), transparent 60%), radial-gradient(600px 260px at 80% 0%, rgba(6,182,212,.12), transparent 60%), color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: var(--sh2); overflow: hidden; }

    .auth-card .card-body { padding: 18px; }

.form-login-divider { width: 100%; color: rgba(0, 0, 0, .8); color: var(--form-login-divider-color); justify-content: center; align-items: center; margin-top: 0; margin-bottom: 0; font-size: 13px; display: flex; }
.form-login-div-line { width: 40%; height: .8px; background-color: rgba(0, 0, 0, 0.2); background-color: var(--form-login-div-line-background-color); }
.form-login-div-text { min-width: 33%; text-align: center; flex: none; }
#external-account { margin-top: 20px; }
.external-login-btn { cursor: pointer; background: #FFF; background: var(--external-login-btn-background); max-width: 100%; margin-right: 10px; display: inline-block; margin-bottom: 10px; color: #000; color: var(--external-login-btn-color); border: 1px solid #DCDCE5; border: 1px solid var(--external-login-btn-border-color); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 8px 20px 8px 15px; font-size: 15px; font-weight: 300; text-decoration: none; transition: border-color .2s, box-shadow .2s; -moz-transition: border-color .2s, box-shadow .2s; -webkit-transition: border-color .2s, box-shadow .2s; position: relative; box-shadow: 0 1px 2px var(--external-login-btn-box-shadow-color); -moz-box-shadow: 0 1px 2px var(--external-login-btn-box-shadow-color); -webkit-box-shadow: 0 1px 2px var(--external-login-btn-box-shadow-color); }
    .external-login-btn:hover { box-shadow: none; border-color: #374252; }
    .external-login-btn:focus { border: 1px solid #000; }
    .external-login-btn::-ms-input-placeholder { color: #6e6e6e; }
    .external-login-btn::placeholder { color: #6e6e6e; }
    .external-login-btn .social-content { grid-column-gap: 20px; align-items: center; display: flex; height: 24px; }
    .external-login-btn .social-image { width: 24px; max-width: 100%; vertical-align: middle; display: inline-block; }
    .external-login-btn .social-text { font-weight: bold; color: #555; color: var(--external-login-btn-social-text-color); }
#g_id_onload { display: none; }
.external-login-btn.google:hover { border-color: #4285f4; }
.external-login-btn.microsoft:hover { border-color: #0067b8; }
.external-login-btn.facebook:hover { border-color: #1777f2; }

/* ==========================================
   Theme Toggle Icon Button
   ========================================== */
.theme-toggle { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

    .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--sh1); }

.theme-icon { width: 18px; height: 18px; display: block; background-size: contain; background-repeat: no-repeat; }

[data-bs-theme="light"][data-bs-usedevicetheme="false"] .theme-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z'/%3E%3C/svg%3E"); }

[data-bs-theme="dark"][data-bs-usedevicetheme="false"] .theme-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v2m0 14v2m9-9h-2M5 12H3m15.364-6.364l-1.414 1.414M7.05 16.95l-1.414 1.414m0-11.314l1.414 1.414m9.9 9.9l1.414 1.414M12 8a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E"); }

[data-bs-theme="light"][data-bs-usedevicetheme="true"] .theme-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M8%2020h8%22/%3E%3Cpath%20d%3D%22M12%2016v4%22/%3E%3C/svg%3E"); }

[data-bs-theme="dark"][data-bs-usedevicetheme="true"] .theme-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E5E7EB%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M8%2020h8%22/%3E%3Cpath%20d%3D%22M12%2016v4%22/%3E%3C/svg%3E"); }


/* =========================
   Logout Icon Button
   ========================= */
.logout-icon-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 70%, transparent); transition: transform var(--t-fast), box-shadow var(--t-fast); }

    .logout-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--sh1); }

.logout-icon { width: 18px; height: 18px; display: block; background-size: contain; background-repeat: no-repeat; }

/* Light mode icon */
[data-bs-theme="light"] .logout-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1'/%3E%3C/svg%3E"); }

/* Dark mode icon */
[data-bs-theme="dark"] .logout-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1'/%3E%3C/svg%3E"); }

/* Profile avatar dropdown */
.avatar-btn { width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-2) 70%, transparent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh1); transition: transform var(--t-fast), box-shadow var(--t-fast); }

    .avatar-btn:hover { transform: translateY(-1px); box-shadow: var(--sh2); }

    .avatar-btn.dropdown-toggle::after { display: none; /* remove caret */ }

.avatar-img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; display: block; border: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent); }

.avatar-initials { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -0.02em; color: white; background: linear-gradient(135deg, var(--a1), var(--a4)); }

.avatar-menu { border-radius: 16px; border: 1px solid var(--stroke); /*background: color-mix(in srgb, var(--surface) 88%, transparent);*/ box-shadow: var(--sh2); padding: 8px; min-width: 240px; }

    .avatar-menu .dropdown-item { border-radius: 12px; padding: 10px 12px; }

        .avatar-menu .dropdown-item:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); }

.dropdown-item .nav-ico-dropdown { margin-right: 5px; }

    .dropdown-item .nav-ico-dropdown svg { width: 18px; height: 18px; position: relative; top: -2px; }

.dropdown-item .nav-text-dropdown { }

/* ==========================================
   Motion + Accessibility
   ========================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   Auth Background (Login/Register)
   ========================= */

.auth-bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: grid; place-items: center; background: url("/img/auth/home-remodel.jpg") center / cover no-repeat; }

/* Dark overlay for readability */
.auth-bg-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,.45), rgba(0,0,0,.55) ); }

/* Centered card container */
.auth-shell { position: relative; width: 100%; max-width: 460px; padding: 16px; z-index: 1; }

/* Login card enhancement */
.auth-card { border-radius: 22px; border: 1px solid var(--stroke); background: radial-gradient(600px 200px at 30% 0%, rgba(110,115,236,.18), transparent 60%), radial-gradient(600px 200px at 80% 0%, rgba(6,182,212,.14), transparent 60%), color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--sh2); backdrop-filter: blur(6px); }

    /* Headings */
    .auth-card h2 { font-weight: 800; letter-spacing: -0.02em; }

/* Mobile: reduce overlay intensity */
@media (max-width: 576px) {
    .auth-bg-overlay { background: rgba(0,0,0,.55); }
}

.comment-replies .comment-card { margin-bottom: 10px; }
.user-profile-name-image { position: relative; }
    .user-profile-name-image img { display: inline-block; border-radius: 99px; transform: none; transition: none; object-fit: cover; width: 24px; height: 24px; padding: 2px; margin-right: 5px; border: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent); }
    .user-profile-name-image span { font-weight: bold; position: relative; bottom: -1px; }
.user-profile-link { cursor: pointer; }
    .user-profile-link:hover { text-decoration: underline; }
.avatar-img-title { width: 38px; height: 38px; border-radius: 999px; margin-right: 10px; position: relative; top: -3px; object-fit: cover; padding: 2px; display: inline-block; border: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent); }

/* =========================
   Back to Top Button (SVG)
   ========================= */
.back-to-top { position: fixed; left: 18px; bottom: 18px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--stroke); background: linear-gradient( 135deg, rgba(110,115,236,.85), rgba(6,182,212,.85) ); color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 999; }

    .back-to-top svg { width: 18px; height: 18px; fill: currentColor; }

    .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

    .back-to-top:hover { filter: brightness(1.05); transform: translateY(-2px); }

/* =========================
   Floating Action Button (FAB)
   ========================= */
.fab { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; display: none; align-items: center; justify-content: center; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--a1), var(--a4)); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(110,115,236,.35), 0 4px 12px rgba(0,0,0,.15); transition: transform var(--t-med), box-shadow var(--t-med), filter var(--t-fast), bottom .3s ease; z-index: 998; text-decoration: none; }

    .fab svg { width: 24px; height: 24px; fill: currentColor; }

    .fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px rgba(110,115,236,.45), 0 6px 16px rgba(0,0,0,.2); filter: brightness(1.08); color: #fff; }

    .fab:active { transform: translateY(-1px) scale(1.02); box-shadow: 0 6px 16px rgba(110,115,236,.35); }

    /* Ripple effect */
    .fab::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.3); opacity: 0; transform: scale(0.8); transition: opacity .3s, transform .3s; }

    .fab:active::before { opacity: 1; transform: scale(1); transition: 0s; }

/* Show FAB only on mobile/tablet (below 992px) */
@media (max-width: 991px) {
    .fab { display: flex; }

    /* Hide desktop "New Project" button on mobile */
    .mobile-hide-new-project { display: none !important; }
}

/* FAB label tooltip (optional) */
.fab-label { position: absolute; right: 70px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--stroke); box-shadow: var(--sh2); white-space: nowrap; font-size: 14px; font-weight: 600; pointer-events: none; opacity: 0; transform: translateX(10px); transition: opacity var(--t-fast), transform var(--t-fast); }

.fab:hover .fab-label { opacity: 1; transform: translateX(0); color: var(--bs-body-color); }

/* Initial pulse animation for FAB */
@keyframes fabPulse {
    0% { box-shadow: 0 8px 24px rgba(110,115,236,.35), 0 4px 12px rgba(0,0,0,.15); }
    50% { box-shadow: 0 8px 24px rgba(110,115,236,.55), 0 4px 12px rgba(0,0,0,.25), 0 0 0 12px rgba(110,115,236,.15); }
    100% { box-shadow: 0 8px 24px rgba(110,115,236,.35), 0 4px 12px rgba(0,0,0,.15); }
}

.fab { animation: fabPulse 2s ease-in-out 1s 2; }

/* =========================
   Image Lightbox Modal
   ========================= */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }

.lightbox-overlay.active { display: flex; opacity: 1; }

.lightbox-content { position: relative; max-width: 95vw; max-height: 95vh; display: flex; align-items: center; justify-content: center; animation: lightboxZoomIn .3s var(--ease); }

@keyframes lightboxZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-image { max-width: 100%; max-height: 95vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transition: opacity .15s ease; }

.lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: #fff; font-size: 24px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); z-index: 10000; }

.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); }

.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: #fff; font-size: 24px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); z-index: 10000; }

.lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox-nav.prev { left: 20px; }

.lightbox-nav.next { right: 20px; }

.lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.lightbox-nav:disabled:hover { background: rgba(255, 255, 255, 0.1); }

.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; }

.lightbox-label { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Clickable image cursor */
.lightbox-trigger { cursor: zoom-in; transition: opacity var(--t-fast), transform var(--t-fast); position: relative; }

.lightbox-trigger:hover { opacity: 0.9; }

/* Zoom icon indicator */
.lightbox-trigger::after { content: '🔍'; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity var(--t-fast); pointer-events: none; }

.lightbox-trigger:hover::after { opacity: 1; }

/* Loading spinner for lightbox */
.lightbox-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: lightboxSpin 0.8s linear infinite; z-index: 10001; display: none; }

@keyframes lightboxSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.lightbox-content.loading .lightbox-loading { display: block; }

.lightbox-content.loading .lightbox-image { opacity: 0.3; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
    .lightbox-nav { width: 44px; height: 44px; }
    .lightbox-nav.prev { left: 10px; }
    .lightbox-nav.next { right: 10px; }
    .lightbox-counter, .lightbox-label { font-size: 12px; padding: 6px 12px; }
}

.social-footer-link, .social-footer-link img { position: relative; }
.social-footer-link img { height: 20px; top: -1px; }

.navbar > .container { max-width: none !important; }

.search-form { width: 100%; }
.top-search { position: relative; padding: 3px 0; width: 75%; max-width: 600px; height: 40px; margin: 0 auto; background: color-mix(in srgb, var(--surface-2) 100%, transparent); border: var(--bs-border-width) solid var(--top-search-border-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline: none; overflow: hidden; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; }

    .top-search .top-search-input-holder { position: absolute; left: 40px; right: 50px; top: 2px; bottom: 2px; }

    .top-search input { border: none; outline: none; color: #131921; color: var(--bs-body-color); background-color: transparent; width: 100%; font-size: 15px; line-height: 34px; min-height: 34px; }

    .top-search .start-search { position: absolute; top: 0; bottom: 0; left: 5px; z-index: 1; width: 33px; cursor: pointer; text-align: center; background-color: transparent; }
        .top-search .start-search svg { margin-top: 9px; }

        .top-search .start-search svg, .top-search .filter-search svg { width: 16px; opacity: 0.5; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

        .top-search .start-search:hover svg, .top-search .filter-search:hover svg { opacity: 1.0; }

    .top-search .filter-search { position: absolute; top: 0; bottom: 0; right: 12px; z-index: 1; width: 30px; cursor: pointer; text-align: center; }
        .top-search .filter-search svg { margin-top: 10px; }

    .top-search input::placeholder { color: #AAA; color: var(--text-input-placeholder-text-color); }
.search-close-header { display: none; }
#advancedFilters { position: absolute; padding: 10px; background: color-mix(in srgb, var(--surface-5) 100%, transparent); color: var(--bs-card-color); box-shadow: var(--sh2); transition: transform var(--t-med), box-shadow var(--t-med); border-radius: var(--r-md); border: 1px solid var(--stroke); -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
    #advancedFilters .filter-row { text-align: center; }
    #advancedFilters .filter-col { display: inline-block; text-align: left; /*width: 49%;*/ padding-left: 10px; padding-right: 10px; box-sizing: border-box; }

@media (max-width: 768px) {
    .navbar > .container { display: block; }
        .navbar > .container::after { content: ""; display: block; clear: both; }
    .navbar .navbar-brand { float: left; margin-top: 4px; }
    .navbar-toggler { float: right; margin-left: 15px; height: 40px; }
    .navbar-search svg { position: relative; top: -2px; }
    .navbar-collapse { display: block !important; z-index: 1; clear: both; position: absolute; top: 0; left: -100%; width: 100%; opacity: 0; transition: all .3s ease-in-out; background: color-mix(in srgb, var(--surface-5) 100%, transparent); }
        .navbar-collapse .search-form { display: block !important; min-height: 56px; }
        .navbar-collapse .top-search { position: absolute; width: auto; max-width: none; left: 15px; top: 8px; right: 60px; }
        .navbar-collapse .search-close-header { display: block; float: right; text-align: center; width: 45px; height: 56px; line-height: 35px; margin-right: 5px; font-weight: bold; cursor: pointer; padding: 10px; box-sizing: border-box; opacity: 0.5; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
            .navbar-collapse .search-close-header:hover { opacity: 1.0; }
        .navbar-collapse.show { opacity: 1.0; left: 0; }
        .navbar-collapse .dropdown-toggles { display: none !important; }
    #advancedFilters { width: auto !important; left: 10px !important; right: 10px !important; }
}