@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap');

:root {
    --surface:#F8FAFC; --surface-2:#F1F5F9; --card-bg:#FFFFFF; --card-border:#E2E8F0;
    --text:#0F172A; --text-2:#334155; --muted:#64748B; --muted-2:#94A3B8;
    --indigo:#4F46E5; --indigo-light:#EEF2FF; --indigo-glow:rgba(79,70,229,0.15);
    --nav-bg:rgba(255,255,255,0.75); --card-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.06);
}
body.dark-theme {
    --surface:#0F172A; --surface-2:#1E293B; --card-bg:#1E293B; --card-border:#334155;
    --text:#F1F5F9; --text-2:#CBD5E1; --muted:#64748B; --muted-2:#475569;
    --indigo-light:#1E1B4B; --nav-bg:rgba(15,23,42,0.85);
    --card-shadow:0 1px 3px rgba(0,0,0,0.3),0 8px 24px rgba(0,0,0,0.3);
}
*,*::before,*::after{box-sizing:border-box;margin:0;}
html{overflow-x:hidden;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--surface);color:var(--text);transition:background 0.3s,color 0.3s;-webkit-font-smoothing:antialiased;}
#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,#4F46E5,#9333EA);z-index:9999;transition:width 0.1s;}

.glass-nav{backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--card-border);transition:all 0.3s;}
.glass-nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.nav-link{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);text-decoration:none;position:relative;transition:color 0.2s;}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--indigo);transition:width 0.25s;}
.nav-link:hover,.nav-link.active{color:var(--indigo);}
.nav-link:hover::after,.nav-link.active::after{width:100%;}

/* PROFILE HERO */
.profile-hero{position:relative;overflow:hidden;}
.profile-banner{height:240px;background:linear-gradient(135deg,#1E1B4B 0%,#312E81 100%);position:relative;overflow:hidden;}
.profile-banner img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(0.85);}
.profile-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.5) 100%);}
.profile-info-bar{background:var(--card-bg);border-bottom:1px solid var(--card-border);padding:0 2rem 1.5rem;}
.profile-avatar-wrap{position:relative;margin-top:-52px;display:inline-block;}
.profile-avatar-inner{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--indigo-light);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;color:var(--indigo);box-shadow:0 0 0 4px var(--card-bg),0 0 0 6px rgba(79,70,229,0.35);}
.profile-avatar-inner img{width:100%;height:100%;object-fit:cover;}

/* REALISATION CARDS */
.real-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.75rem;}
@media(max-width:640px){.real-grid{grid-template-columns:1fr;}}
.real-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:1.75rem;overflow:hidden;box-shadow:var(--card-shadow);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),box-shadow 0.35s,border-color 0.25s;display:flex;flex-direction:column;}
.real-card:hover{transform:translateY(-8px);border-color:var(--indigo);box-shadow:0 16px 40px -8px rgba(79,70,229,0.18),0 0 0 1px rgba(79,70,229,0.12);}
.real-card-thumb{height:190px;background:linear-gradient(135deg,#1E1B4B,#312E81);overflow:hidden;position:relative;cursor:pointer;}
.real-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.real-card:hover .real-card-thumb img{transform:scale(1.05);}
.real-card-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:0.25;}
.real-card-body{padding:1.25rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column;gap:0.875rem;}
.real-card-title{font-size:1.1rem;font-weight:800;color:var(--text);line-height:1.25;}
.real-card-desc{font-size:13px;line-height:1.65;color:var(--muted);flex:1;}
.real-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:7px;font-size:10px;font-weight:700;border:1px solid transparent;}
.real-card-footer{display:flex;align-items:center;gap:8px;padding-top:0.875rem;border-top:1px solid var(--card-border);margin-top:auto;}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid var(--card-border);color:var(--muted);background:transparent;text-decoration:none;transition:all 0.15s;cursor:pointer;}
.link-btn:hover{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-light);}

/* OWNER ACTIONS */
.own-actions-bar{display:none;}
.own-actions-bar.visible{display:flex;}
.add-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:14px;background:var(--indigo);color:#fff;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all 0.2s;text-decoration:none;}
.add-btn:hover{background:#4338CA;transform:translateY(-2px);}
.edit-real-btn{width:30px;height:30px;border-radius:8px;background:var(--indigo);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all 0.2s;flex-shrink:0;}
.edit-real-btn:hover{transform:scale(1.15) rotate(8deg);}
.del-real-btn{width:30px;height:30px;border-radius:8px;background:rgba(220,38,38,0.08);color:#DC2626;border:1px solid rgba(220,38,38,0.2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all 0.2s;flex-shrink:0;}
.del-real-btn:hover{background:#DC2626;color:#fff;}

.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* MODAL */
#addModal{opacity:0;pointer-events:none;transition:opacity 0.28s ease;}
#imageModal{display:none;pointer-events:none;}
#addModal.open{opacity:1;pointer-events:all;}
#addModal .modal-panel{transform:scale(0.95) translateY(20px);transition:transform 0.32s cubic-bezier(0.34,1.1,0.64,1);}
#addModal.open .modal-panel{transform:scale(1) translateY(0);}
.modal-panel::-webkit-scrollbar{width:4px;}
.modal-panel::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:99px;}
.form-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--muted);margin-bottom:6px;display:block;}
.form-input{width:100%;padding:11px 14px;border:2px solid var(--card-border);border-radius:12px;font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:border-color 0.2s,box-shadow 0.2s;background:var(--card-bg);color:var(--text);}
.form-input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-glow);}
body.dark-theme .form-input{background:var(--surface);}
.tag-pill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:8px;font-size:11px;font-weight:600;border:1.5px solid var(--card-border);background:var(--card-bg);color:var(--muted);cursor:pointer;transition:all 0.15s;user-select:none;}
.tag-pill:hover:not(.selected){border-color:var(--indigo);color:var(--indigo);}
.tag-pill.selected{background:var(--indigo);border-color:var(--indigo);color:#fff;}

#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px) scale(0.96);z-index:9999;opacity:0;transition:transform 0.32s cubic-bezier(0.34,1.2,0.64,1),opacity 0.25s;white-space:nowrap;}
#toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;}
body.dark-theme #toast{background:#1E293B;color:#F1F5F9;border-color:#334155;}
#scrollToTop{opacity:0;pointer-events:none;transition:all 0.3s;}
#scrollToTop.visible{opacity:1;pointer-events:all;}
#mobileMenu{transform:translateX(100%);transition:transform 0.3s ease;}
#mobileMenu.open{transform:translateX(0);}

/* LOGIN */
#loginModal{opacity:0;pointer-events:none;transition:opacity 0.28s;}
#loginModal.open{opacity:1;pointer-events:all;}
#loginModal .modal-panel{transform:scale(0.95) translateY(20px);transition:transform 0.32s cubic-bezier(0.34,1.1,0.64,1);}
#loginModal.open .modal-panel{transform:scale(1) translateY(0);}
#uploadZone.drag-over{border-color:var(--indigo)!important;background:var(--indigo-light)!important;}
#uploadZone.drag-over i{color:var(--indigo)!important;}
#uploadZone.uploading{pointer-events:none;opacity:0.7;}

/* CROP MODAL */
#cropModal{display:none;opacity:0;pointer-events:none;transition:opacity 0.25s;}
#cropModal.open{display:flex;opacity:1;pointer-events:all;}
#cropModal .modal-panel{transform:scale(0.95) translateY(16px);transition:transform 0.3s cubic-bezier(0.34,1.1,0.64,1);}
#cropModal.open .modal-panel{transform:scale(1) translateY(0);}
#cropCanvas{display:block;cursor:crosshair;}
.crop-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all 0.15s;font-family:'Plus Jakarta Sans',sans-serif;}
.crop-btn-primary{background:var(--indigo);color:#fff;}
.crop-btn-primary:hover{background:#4338CA;transform:translateY(-1px);}
.crop-btn-secondary{background:var(--surface-2);color:var(--muted);border:1px solid var(--card-border);}
.crop-btn-secondary:hover{border-color:var(--indigo);color:var(--indigo);}
.crop-slider{-webkit-appearance:none;width:100%;height:4px;border-radius:4px;outline:none;background:var(--card-border);cursor:pointer;}
.crop-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--indigo);cursor:pointer;box-shadow:0 2px 6px rgba(79,70,229,0.4);}
.crop-overlay{position:absolute;inset:0;pointer-events:none;}
#cropWrap{position:relative;display:inline-block;overflow:hidden;}