:root{--primary-color: #2c3e50;--primary-light: #34495e;--secondary-color: #e67e22;--secondary-light: #f39c12;--accent-blue: #3498db;--accent-green: #27ae60;--accent-red: #e74c3c;--accent-purple: #9b59b6;--accent-teal: #1abc9c;--canvas: #fef5e7;--linen: #f8f6f0;--cream: #fdf6e3;--warm-gray: #7f8c8d;--cool-gray: #95a5a6;--border-color: #ecf0f1;--shadow: 0 .25rem .5rem rgba(52, 73, 94, .1);--shadow-hover: 0 .5rem 1rem rgba(52, 73, 94, .15);--shadow-card: 0 .125rem .375rem rgba(52, 73, 94, .08)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,var(--canvas) 0%,var(--linen) 100%);background-attachment:fixed;color:var(--primary-color);line-height:1.6}.card{border:1px solid var(--border-color);box-shadow:var(--shadow-card);border-radius:.75rem;background-color:#fff;transition:all .3s ease}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card-header{background:linear-gradient(135deg,var(--cream) 0%,white 100%);border-bottom:1px solid var(--border-color);border-radius:.75rem .75rem 0 0!important}.navbar-brand{font-weight:800;font-size:1.75rem;background:linear-gradient(45deg,var(--secondary-color),var(--secondary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.1)}.navbar-dark{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%)!important;border-bottom:3px solid var(--secondary-color)}.upload-area{border:3px dashed var(--cool-gray);border-radius:1rem;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,white 0%,var(--cream) 100%);position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(52,152,219,.05),transparent);transform:rotate(45deg);transition:transform .6s ease}.upload-area:hover{border-color:var(--accent-blue);transform:translateY(-4px);box-shadow:var(--shadow-hover)}.upload-area:hover:before{transform:rotate(45deg) translate(50%,50%)}.upload-area.dragover{border-color:var(--secondary-color);background:linear-gradient(135deg,var(--cream) 0%,var(--linen) 100%);transform:scale(1.02)}.image-preview{max-width:100%;height:auto;border-radius:.375rem;box-shadow:var(--shadow)}.patch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem;padding:.5rem}.patch-collection-card{transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color)}.patch-collection-card:hover{transform:translateY(-4px);box-shadow:0 1rem 2rem #2c3e5026;border-color:var(--secondary-color)}@media (max-width: 767.98px){.patch-collection-card .row.g-0{flex-direction:column}.patch-collection-card .col-md-4{max-width:100%;flex:0 0 auto}.patch-collection-card .patch-image-container{aspect-ratio:16/9;min-height:200px;max-height:250px}.patch-collection-card .col-md-8{max-width:100%;flex:0 0 auto}}.patch-item{aspect-ratio:1;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-card);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:2px solid transparent;background:linear-gradient(white,white) padding-box,linear-gradient(135deg,var(--accent-teal),var(--accent-blue)) border-box}.patch-item:hover{transform:translateY(-6px) rotate(1deg);box-shadow:var(--shadow-hover);border:2px solid var(--secondary-color)}.patch-item img{width:100%;height:100%;object-fit:cover}.patch-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.patch-item:hover .patch-overlay{opacity:1}.patch-overlay-text{text-align:center;color:#fff;font-size:.75rem}.existing-group-item{transition:all .3s ease;border-radius:.75rem!important}.existing-group-item:hover{background:linear-gradient(135deg,var(--cream) 0%,var(--linen) 100%);border-color:var(--secondary-color)!important;transform:translate(4px);box-shadow:var(--shadow-hover)}.match-item{border:3px solid transparent;border-radius:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);background:linear-gradient(white,white) padding-box,linear-gradient(135deg,var(--cool-gray),var(--border-color)) border-box}.match-item:hover{border:3px solid var(--accent-blue);transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-hover)}.match-item.selected{border:3px solid var(--secondary-color);background:linear-gradient(white,white) padding-box,linear-gradient(135deg,var(--secondary-color),var(--secondary-light)) border-box;transform:translateY(-6px) scale(1.03);box-shadow:0 1rem 2rem #e67e224d}.match-item.selected:after{content:"✓";position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:linear-gradient(135deg,var(--accent-green),var(--accent-teal));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:var(--shadow-hover)}.stat-card{text-align:center;padding:2rem 1.5rem;background:linear-gradient(135deg,white 0%,var(--cream) 100%);border-radius:1rem;box-shadow:var(--shadow-card);border:1px solid var(--border-color);transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-teal),var(--accent-blue),var(--accent-purple));border-radius:1rem 1rem 0 0}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.stat-number{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stat-label{font-size:.875rem;color:var(--warm-gray);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.camera-container{position:relative;border-radius:1rem;overflow:hidden;background:var(--primary-color);border:3px solid var(--secondary-color)}.camera-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:10}.capture-btn{width:80px;height:80px;border-radius:50%;border:4px solid white;background:linear-gradient(135deg,var(--secondary-color),var(--secondary-light));box-shadow:0 0 0 4px #ffffff4d,var(--shadow-hover);transition:all .3s ease;position:relative}.capture-btn:before{content:"📸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px}.capture-btn:hover{transform:scale(1.15) rotate(5deg);box-shadow:0 0 0 6px #fff6,0 1rem 2rem #e67e2266}.patch-background{background:url(/login_background.jpg) no-repeat center center fixed;background-size:cover}.patch-background:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 80%,var(--accent-teal) 0%,transparent 50%),radial-gradient(circle at 80% 20%,var(--accent-blue) 0%,transparent 50%),radial-gradient(circle at 40% 40%,var(--secondary-light) 0%,transparent 50%);opacity:.03;z-index:-1}.card.shadow{background:rgba(255,255,255,.95);box-shadow:0 1rem 3rem #2c3e5026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@media (min-width: 576px){.patch-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (min-width: 768px){.patch-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}}.min-vh-100{min-height:100vh}.cursor-pointer{cursor:pointer}.btn-primary,.btn-dark{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);border:none;border-radius:.75rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease;box-shadow:var(--shadow-card)}.btn-primary:hover,.btn-dark:hover{background:linear-gradient(135deg,var(--primary-light) 0%,var(--secondary-color) 100%);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-outline-dark{border:2px solid var(--primary-color);color:var(--primary-color);border-radius:.75rem;font-weight:600;background:linear-gradient(135deg,white 0%,var(--cream) 100%);transition:all .3s ease}.btn-outline-dark:hover{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);border-color:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-outline-light{border:2px solid rgba(255,255,255,.8);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;transition:all .3s ease}.btn-outline-light:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:9999}.fade-in{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-first-nav{position:relative;z-index:1000}.hamburger-btn{background:none;border:none;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;border-radius:.5rem;transition:all .3s ease;cursor:pointer}.hamburger-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}.hamburger-line{width:24px;height:2px;background:white;transition:all .3s ease;border-radius:2px}.hamburger-line.open:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.hamburger-line.open:nth-child(2){opacity:0}.hamburger-line.open:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(44,62,80,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:999;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .3s ease-out}.mobile-nav-menu{width:90%;max-width:400px;max-height:85vh;background:linear-gradient(135deg,white 0%,var(--cream) 100%);border-radius:1.5rem;box-shadow:0 2rem 4rem #0000004d;padding:2rem;animation:slideInMenu .4s ease-out;overflow-y:auto}.mobile-nav-links{display:flex;flex-direction:column;gap:1rem}.mobile-nav-link{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;background:white;border:2px solid var(--border-color);border-radius:1rem;text-decoration:none;color:var(--primary-color);font-weight:600;font-size:1.1rem;transition:all .3s ease;box-shadow:var(--shadow-card);position:relative;overflow:hidden}.mobile-nav-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(52,152,219,.1),transparent);transition:left .5s ease}.mobile-nav-link:hover:before{left:100%}.mobile-nav-link:hover{transform:translate(8px) scale(1.02);border-color:var(--secondary-color);box-shadow:var(--shadow-hover);color:var(--primary-color);text-decoration:none}.mobile-nav-link.logout-btn{background:linear-gradient(135deg,var(--accent-red),#c0392b);color:#fff;border-color:var(--accent-red);cursor:pointer;border:none;width:100%}.mobile-nav-link.logout-btn:hover{background:linear-gradient(135deg,#c0392b,var(--accent-red));color:#fff}.nav-icon{display:flex;align-items:center;justify-content:center;min-width:1.5rem;text-align:center}.nav-svg-icon{width:20px;height:20px;transition:transform .25s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes slideInMenu{0%{transform:translateY(-50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@media (max-width: 374px){.mobile-nav-overlay{padding:1rem}.mobile-nav-menu{width:95%;max-width:280px;padding:1.25rem;border-radius:1rem}.mobile-nav-links{gap:.75rem}.mobile-nav-link{font-size:.95rem;padding:1rem 1.25rem;border-radius:.75rem}.nav-svg-icon{width:18px;height:18px}.nav-icon{min-width:1.25rem}}@media (min-width: 375px) and (max-width: 424px){.mobile-nav-overlay{padding:1.25rem}.mobile-nav-menu{width:92%;max-width:320px;padding:1.5rem}.mobile-nav-links{gap:.875rem}.mobile-nav-link{font-size:1rem;padding:1.1rem 1.375rem}}@media (min-width: 425px) and (max-width: 575px){.mobile-nav-overlay{padding:1.5rem}.mobile-nav-menu{width:90%;max-width:380px;padding:1.75rem}.mobile-nav-link{font-size:1.05rem;padding:1.15rem 1.4rem}}@media (min-width: 576px){.mobile-nav-overlay{padding:2rem}.mobile-nav-menu{max-width:500px;padding:3rem}.mobile-nav-link{font-size:1.2rem;padding:1.5rem 2rem}}@media (max-height: 500px) and (orientation: landscape){.mobile-nav-overlay{padding:.75rem}.mobile-nav-menu{width:95%;max-width:450px;max-height:90vh;padding:1rem;border-radius:1rem}.mobile-nav-links{gap:.5rem}.mobile-nav-link{font-size:.9rem;padding:.8rem 1.2rem;border-radius:.75rem}.nav-svg-icon{width:16px;height:16px}}@media (max-height: 400px) and (orientation: landscape){.mobile-nav-menu{max-height:95vh;padding:.75rem}.mobile-nav-links{gap:.375rem}.mobile-nav-link{font-size:.85rem;padding:.7rem 1rem}}@media (min-width: 768px){.hamburger-btn{width:44px;height:44px}.hamburger-line{width:28px;height:3px}}.btn-link{text-decoration:none;transition:all .3s ease;border-radius:50%;padding:.5rem}.btn-link:hover{text-decoration:none;background:rgba(241,196,15,.1);box-shadow:0 0 20px #f1c40f4d}.btn-link:focus{box-shadow:none}.card-body{position:relative}.card-body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 2px 2px,rgba(44,62,80,.02) 1px,transparent 0);background-size:20px 20px;pointer-events:none;border-radius:inherit}@keyframes patchBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.patch-item img{animation:patchBreathe 6s ease-in-out infinite;animation-delay:var(--animation-delay, 0s)}.patch-item:nth-child(1){--animation-delay: 0s}.patch-item:nth-child(2){--animation-delay: .5s}.patch-item:nth-child(3){--animation-delay: 1s}.patch-item:nth-child(4){--animation-delay: 1.5s}.patch-item:nth-child(5){--animation-delay: 2s}.mobile-footer{position:fixed;bottom:0;left:0;right:0;background:rgba(44,62,80,.98);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -.25rem 1rem #2c3e504d;z-index:1000;padding:.5rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.mobile-footer-content{display:flex;justify-content:space-around;align-items:center;max-width:100%;margin:0 auto;padding:0 .5rem}.mobile-footer-item{display:flex;flex-direction:column;align-items:center;padding:.875rem .5rem .75rem;color:#ffffffa6;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);border-radius:.75rem;min-width:60px;position:relative}.mobile-footer-item:hover{color:#ffffffe6;text-decoration:none;background:rgba(255,255,255,.08);transform:translateY(-2px)}.mobile-footer-item.active{color:#fff;background:rgba(230,126,34,.12)}.mobile-footer-item.active:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:24px;height:2px;background:var(--secondary-color);border-radius:1px}.footer-svg-icon{width:22px;height:22px;transition:transform .25s ease}.mobile-footer-icon{display:flex;align-items:center;justify-content:center;margin-bottom:.375rem;transition:transform .25s ease}.mobile-footer-label{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;line-height:1}body:has([data-page=more]) .mobile-footer,.more-page .mobile-footer{box-shadow:none;border-top:1px solid rgba(255,255,255,.05)}.mobile-footer-item:hover .mobile-footer-icon{transform:translateY(-1px)}.mobile-footer-item:hover .footer-svg-icon{transform:scale(1.1)}@media (max-width: 375px){.mobile-footer-content{padding:0 .25rem}.mobile-footer-item{padding:.75rem .25rem .625rem;min-width:50px}.footer-svg-icon{width:20px;height:20px}.mobile-footer-label{font-size:.6rem}}@media (min-width: 768px){.mobile-footer{display:none}}body{padding-bottom:90px}@media (min-width: 768px){body{padding-bottom:0}}